{"id":14272,"library":"vue-css-donut-chart","title":"Vue CSS Donut Chart Component","description":"vue-css-donut-chart is a lightweight Vue component designed for creating highly customizable donut charts using pure CSS. Targeting Vue 3 environments (current stable version 2.1.0), it provides a flexible solution for visualizing data slices without relying on external SVG or Canvas libraries. The package maintains an active development status, with a clear separation for Vue 2 support (version 1.x), ensuring compatibility across major Vue ecosystems. Key differentiators include its minimal bundle size, pure CSS rendering for performance and ease of styling, and an extensive API for controlling chart appearance, including thickness, colors, legend placement, and responsiveness. It also supports conversion to a pie chart by adjusting the `thickness` prop and offers various interaction events for individual sections.","status":"active","version":"2.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/dumptyd/vue-css-donut-chart","tags":["javascript","donut","pie","chart","circle","radial","progress","vue","css","typescript"],"install":[{"cmd":"npm install vue-css-donut-chart","lang":"bash","label":"npm"},{"cmd":"yarn add vue-css-donut-chart","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-css-donut-chart","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for the Vue component to function.","package":"vue","optional":false}],"imports":[{"note":"For Vue 3 projects using `<script setup>` or standard component registration, `VcDonut` is a named export. The package ships as ESM, so CommonJS `require` is generally incorrect in modern Vue CLI/Vite projects.","wrong":"import VcDonut from 'vue-css-donut-chart';\n// OR\nconst VcDonut = require('vue-css-donut-chart');","symbol":"VcDonut","correct":"import { VcDonut } from 'vue-css-donut-chart';"},{"note":"When including the component via `<script>` tags in a browser environment (UMD build), the component constructor is available under `vcdonut.default`.","wrong":"app.use(vcdonut);","symbol":"vcdonut (UMD Global)","correct":"app.use(vcdonut.default);"},{"note":"The package ships TypeScript types. `DonutSection` is an example of a type that can be imported to strong-type the `sections` prop, improving type safety when defining chart data programmatically.","symbol":"DonutSection (Type)","correct":"import type { DonutSection } from 'vue-css-donut-chart';"}],"quickstart":{"code":"<template>\n  <vc-donut\n    background=\"white\"\n    foreground=\"grey\"\n\n    :size=\"200\"\n    unit=\"px\"\n\n    :thickness=\"30\"\n\n    has-legend\n    legend-placement=\"top\"\n\n    :sections=\"sections\"\n    :total=\"100\"\n    :start-angle=\"0\"\n\n    auto-adjust-text-size\n    :suppress-validation-warnings=\"false\"\n\n    @section-click=\"handleSectionClick\"\n    @section-mouseenter=\"handleSectionEvent\"\n    @section-mouseleave=\"handleSectionEvent\"\n    @section-mouseover=\"handleSectionEvent\"\n    @section-mouseout=\"handleSectionEvent\"\n    @section-mousemove=\"handleSectionEvent\">\n    <h1>75%</h1>\n  </vc-donut>\n</template>\n<script setup lang=\"ts\">\n  import { VcDonut } from 'vue-css-donut-chart';\n  import type { DonutSection } from 'vue-css-donut-chart';\n\n  const sections: DonutSection[] = [\n    { label: 'Red section', value: 25, color: 'red' },\n    { label: 'Green section', value: 25, color: 'green' },\n    { label: 'Blue section', value: 25, color: 'blue' }\n  ];\n\n  const handleSectionClick = (section: DonutSection, event: MouseEvent) => {\n    console.log(`Section clicked: ${section.label}`);\n  };\n\n  const handleSectionEvent = (section: DonutSection, event: MouseEvent) => {\n    console.log(`Section: ${section.label} | Event: ${event.type}.`);\n  };\n</script>","lang":"typescript","description":"This quickstart demonstrates how to use the `VcDonut` component with a comprehensive set of props, including custom colors, sizes, legend, and event handling. It sets up three colored sections and logs interaction events."},"warnings":[{"fix":"For Vue 2 projects, install version 1.x: `npm install vue-css-donut-chart@^1` or `yarn add vue-css-donut-chart@^1`.","message":"Version 2.0.0 and above of `vue-css-donut-chart` are exclusively for Vue 3. Using it with a Vue 2 project will result in runtime errors due to API incompatibilities.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"If inner content is crucial, avoid `thickness: 100`. Instead, use a value slightly less than 100 or position the content outside the donut component itself if a perfect pie chart look is desired with visible inner content.","message":"Setting the `thickness` prop to `100` (which effectively makes it a pie chart) will visually hide any content placed in the component's default slot (e.g., text or HTML elements inside the donut hole). The content will still be present in the DOM but obscured.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'1':67 '2':64 '2.1.0':33 '3':28 'across':71 'activ':55 'adjust':115 'also':107 'api':94 'appear':98 'bundl':80 'canva':49 'chart':4,10,22,97,113,130 'circl':131 'clear':60 'color':101 'compat':70 'compon':5,15 'control':96 'convers':109 'creat':18 'css':2,8,25,83,135 'current':30 'customiz':20 'data':41 'design':16 'develop':56 'differenti':76 'donut':3,9,21,128 'eas':88 'ecosystem':74 'ensur':69 'environ':29 'event':123 'extens':93 'extern':46 'flexibl':37 'high':19 'includ':77,99 'individu':125 'interact':122 'javascript':127 'key':75 'legend':102 'librari':50 'lightweight':13 'maintain':53 'major':72 'minim':79 'offer':120 'packag':52 'perform':86 'pie':112,129 'placement':103 'progress':133 'prop':118 'provid':35 'pure':24,82 'radial':132 'reli':44 'render':84 'respons':105 'section':126 'separ':61 'size':81 'slice':42 'solut':38 'stabl':31 'status':57 'style':90 'support':65,108 'svg':47 'target':26 'thick':100,117 'typescript':136 'use':23 'various':121 'version':32,66 'visual':40 'vue':1,7,14,27,63,73,134 'vue-css-donut-chart':6 'without':43 'x':68","created_at":"2026-04-20T01:58:50.847874+00:00","updated_at":"2026-04-20T01:58:50.847874+00:00","problems":[{"fix":"Ensure you are using `import { VcDonut } from 'vue-css-donut-chart';` in your component's script section or `app.use(vcdonut.default)` if using the UMD build in a browser.","cause":"The `vc-donut` component was not correctly imported or registered in your Vue application.","error":"[Vue warn]: Failed to resolve component: vc-donut"},{"fix":"Verify your Vue version and install the corresponding `vue-css-donut-chart` version (v1.x for Vue 2, v2.x for Vue 3). If using UMD, ensure you call `app.use(vcdonut.default)`.","cause":"This typically occurs when trying to use `vue-css-donut-chart@^2.0.0` (Vue 3 compatible) in a Vue 2 project, or vice-versa, or incorrectly importing the UMD global.","error":"TypeError: Cannot read properties of undefined (reading 'install')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":"https://vue-css-donut-chart.netlify.app","github":"https://github.com/dumptyd/vue-css-donut-chart","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vue-css-donut-chart","openapi_spec":null,"status_page":null,"smithery":null,"categories":["serialization","data"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}