{"id":13701320,"url":"https://github.com/dumptyd/vue-css-donut-chart","last_synced_at":"2025-10-27T09:13:33.059Z","repository":{"id":46341878,"uuid":"155763716","full_name":"dumptyd/vue-css-donut-chart","owner":"dumptyd","description":"Lightweight Vue component for drawing pure CSS donut charts","archived":false,"fork":false,"pushed_at":"2024-09-01T22:45:24.000Z","size":902,"stargazers_count":129,"open_issues_count":7,"forks_count":19,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T11:10:02.497Z","etag":null,"topics":["chart","css","donut","doughnut","pie-chart","progress-bar","radial-progress","vue"],"latest_commit_sha":null,"homepage":"https://dumptyd.github.io/vue-css-donut-chart/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dumptyd.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-11-01T19:14:32.000Z","updated_at":"2025-02-12T12:26:03.000Z","dependencies_parsed_at":"2024-10-11T08:50:51.503Z","dependency_job_id":"b0b022cd-d61d-4c97-94d0-9deb7ccace36","html_url":"https://github.com/dumptyd/vue-css-donut-chart","commit_stats":{"total_commits":88,"total_committers":3,"mean_commits":"29.333333333333332","dds":0.03409090909090906,"last_synced_commit":"b106728b1c510d1062a799610cb7f11c9df7a649"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dumptyd%2Fvue-css-donut-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dumptyd%2Fvue-css-donut-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dumptyd%2Fvue-css-donut-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dumptyd%2Fvue-css-donut-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dumptyd","download_url":"https://codeload.github.com/dumptyd/vue-css-donut-chart/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247332612,"owners_count":20921853,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chart","css","donut","doughnut","pie-chart","progress-bar","radial-progress","vue"],"created_at":"2024-08-02T20:01:29.164Z","updated_at":"2025-10-27T09:13:28.024Z","avatar_url":"https://github.com/dumptyd.png","language":"TypeScript","funding_links":[],"categories":["JavaScript","Components \u0026 Libraries","TypeScript","UI Components","UI Components [🔝](#readme)"],"sub_categories":["UI Components","Charts"],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cp align=\"center\"\u003e\n    \u003ca href=\"https://dumptyd.github.io/vue-css-donut-chart\"\u003e\n      \u003cimg height=\"180\" src=\"public/favicon.png\"\u003e\n    \u003c/a\u003e\n  \u003c/p\u003e\n  \u003ch2 align=\"center\"\u003evue-css-donut-chart\u003c/h2\u003e\n  \u003cp align=\"center\"\u003eLightweight Vue component for creating donut charts\u003c/p\u003e\n\n  \u003c!-- badges --\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue-css-donut-chart\"\u003e\n    \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/v/vue-css-donut-chart?style=flat-square\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue-css-donut-chart\"\u003e\n    \u003cimg alt=\"npm monthly downloads\" src=\"https://img.shields.io/npm/dm/vue-css-donut-chart?style=flat-square\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://bundlephobia.com/result?p=vue-css-donut-chart\"\u003e\n    \u003cimg alt=\"npm bundle size\" src=\"https://img.shields.io/bundlephobia/minzip/vue-css-donut-chart?style=flat-square\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://codecov.io/gh/dumptyd/vue-css-donut-chart/\"\u003e\n    \u003cimg alt=\"Coverage status\" src=\"https://img.shields.io/codecov/c/gh/dumptyd/vue-css-donut-chart?style=flat-square\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003chr\u003e\n\n| Using Vue 2? |\n| :- |\n| Check out the [documentation for vue-css-donut-chart v1](https://github.com/dumptyd/vue-css-donut-chart/tree/legacy). |\n| **NPM** - https://www.npmjs.com/package/vue-css-donut-chart/v/legacy |\n\n## Preview\n\nLive demo \u0026ndash; https://dumptyd.github.io/vue-css-donut-chart/\n\nPlayground \u0026ndash; https://jsfiddle.net/dumptyd/f4tmz0oy/\n\n## Installation\n\n#### NPM\n\n```console\nyarn add vue-css-donut-chart\n# OR\nnpm i vue-css-donut-chart\n# OR\npnpm add vue-css-donut-chart\n```\n\n#### In-browser\n\n```html\n\u003c!-- unpkg --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/vue-css-donut-chart@2/dist/vcdonut.css\"\u003e\n\u003cscript src=\"https://unpkg.com/vue-css-donut-chart@2\"\u003e\u003c/script\u003e\n\n\u003c!-- OR --\u003e\n\n\u003c!-- jsDelivr --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/vue-css-donut-chart@2/dist/vcdonut.css\"\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vue-css-donut-chart@2/dist/vcdonut.umd.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- registration --\u003e\n\u003cscript\u003e\n  const app = Vue.createApp({});\n  app.use(vcdonut.default); // component will be available as 'vc-donut'\n\u003c/script\u003e\n```\n\n## Usage\n\n#### Basic usage\n\n```vue\n\u003ctemplate\u003e\n  \u003cvc-donut :sections=\"sections\"\u003eBasic donut\u003c/vc-donut\u003e\n\u003c/template\u003e\n\u003cscript setup\u003e\n  // import the styles in a central place (eg: main.js, App.vue) to avoid repetition\n  import 'vue-css-donut-chart/dist/vcdonut.css';\n\n  import { VcDonut } from 'vue-css-donut-chart';\n  const sections = [{ value: 25 }, { value: 25 }];\n\u003c/script\u003e\n```\n\n#### Usage with all available props and events\n\n```vue\n\u003ctemplate\u003e\n  \u003cvc-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\"\u003e\n    \u003ch1\u003e75%\u003c/h1\u003e\n  \u003c/vc-donut\u003e\n\u003c/template\u003e\n\u003cscript setup\u003e\n  import { VcDonut } from 'vue-css-donut-chart';\n  const sections = [\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  const handleSectionEvent = (section, event) =\u003e {\n    console.log(`Section: ${section.label} | Event: ${event.type}.`);\n  };\n\u003c/script\u003e\n```\n\n#### Using the component as a pie chart\n\nSet `thickness` to `0` to make the component look like a pie chart.\n\n```vue\n\u003ctemplate\u003e\n  \u003cvc-donut\n    :sections=\"[{ value: 35 }, { value: 15 }, { value: 15 }, { value: 35 }]\"\n    :thickness=\"100\"\u003e\n  \u003c/vc-donut\u003e\n\u003c/template\u003e\n\u003cscript setup\u003e\n  import { VcDonut } from 'vue-css-donut-chart';\n\u003c/script\u003e\n```\n\n**Note:** setting `thickness` to 100 will completely hide the chart's text or slot content. The content will still be present in the DOM, but it will not be visible.\n\n## API\n\n#### Props\n\n| Prop | Type | Required | Default | Description |\n| ---- | :--: | :------: | :-----: | ----------- |\n| `size` | Number | No | `250` | Diameter of the donut. Can be any positive value. |\n| `unit` | String | No | `'px'` | Unit to use for `size`. Can be any valid CSS unit. Use `%` to make the donut responsive. |\n| `thickness` | Number | No | `20` | Percent thickness of the donut ring relative to `size`. Can be any positive value between 0-100 (inclusive). |\n| `text` | String | No | \u0026ndash; | Text to show in the middle of the donut. This can also be provided through the default slot. |\n| `background` | String | No | `'#ffffff'` | Background color of the donut. In most cases, this should be the background color of the parent element. |\n| `foreground` | String | No | `'#eeeeee'` | Foreground color of the donut. This is the color that is shown for empty region of the donut ring. |\n| `start-angle` | Number | No | `0` | Angle measure in degrees where the first section should start. |\n| `total` | Number | No | `100` | Total for calculating the percentage for each section. |\n| `has-legend` | Boolean | No | `false` | Whether the donut should have a legend. |\n| `legend-placement` | String | No | `'bottom'` | Where the legend should be placed. Valid values are `top`, `right`, `bottom` and `left`. Doesn't have an effect if `has-legend` is not true. |\n| `auto-adjust-text-size` | Boolean | No | `true` | Whether the font-size of the donut content is calculated automatically to fit the available space proportionally. |\n| `sections` | Array\u003csection\u003e | No | `[]` | An array of objects. Each object in the array represents a section. |\n| `section.value` | Number | **Yes** | \u0026ndash; | Value of the section. The component determines what percent of the donut should be taken by a section based on this value and the `total` prop. Sum of all the sections' `value` should not exceed `total`. |\n| `section.color` | String | Read description | Read description | Color of the section. The component comes with 24 predefined colors, so this property is optional if you have \u003c= 24 sections without the `color` property. |\n| `section.label` | String | No | `'Section \u003csection number\u003e'` | Name of the section. This is used in the legend as well as the tooltip text of the section. |\n| `section.ident` | String | No | \u0026ndash; | Identifier for the section. This can be used to uniquely identify a section in the `section-*` events. |\n| `suppress-validation-warnings` | Boolean | No | `false` | Whether to suppress warnings for invalid prop values. |\n\n\n#### Events\n\nAll the `section-*` listeners are called with the `section` object on which the event occurred and the native `Event` object as arguments respectively.\nUse the `ident` property to uniquely identify sections in the `section-*` events.\n\n\n| Event | Parameter | Description |\n| ---------- | ------------ | ----------- |\n| `section-click` | `section`, `event` | Emitted when a section is clicked. |\n| `section-mouseenter` | `section`, `event` | Emitted when the `mouseenter` event occurs on a section. |\n| `section-mouseleave` | `section`, `event` | Emitted when the `mouseleave` event occurs on a section. |\n| `section-mouseover` | `section`, `event` | Emitted when the `mouseover` event occurs on a section. |\n| `section-mouseout` | `section`, `event` | Emitted when the `mouseout` event occurs on a section. |\n| `section-mousemove` | `section`, `event` | Emitted when the `mousemove` event occurs on a section. |\n\n#### Slots\n\n| Slot | Description |\n| ---- | ----------- |\n| default slot | If you want more control over the content of the chart, default slot can be used instead of the `text` prop. |\n| `legend` | Slot for plugging in your own legend. |\n\n## Typescript\n\nThis package is written in TypeScript and comes with its own type definitions out of the box. The types are exported from the main package, so you can import them directly in your project.\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { ref } from 'vue';\nimport { VcDonut } from 'vue-css-donut-chart';\nimport type { DonutSection, DonutChartProps, DonutChartEmits } from 'vue-css-donut-chart';\n\nconst sections = ref\u003cDonutSection[]\u003e([\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\nconst otherProps: DonutChartProps = {\n  size: 200,\n  unit: 'px',\n  thickness: 30,\n  hasLegend: true,\n  // ...\n};\n\u003c/script\u003e\n```\n\n### Types not working?\n\nThe types for this component are generated using a fairly recent version of Vue (as of writing this, it's Vue 3.4.21). If they are not working for you, make sure to update your Vue 3 version to the latest.\n\n## Contributing\n\n**Issues** \u0026ndash; https://github.com/dumptyd/vue-css-donut-chart/issues\n\n## License\n\nCode released under [MIT](https://github.com/vue-css-donut-chart/vue-css-donut-chart/blob/master/LICENSE) license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdumptyd%2Fvue-css-donut-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdumptyd%2Fvue-css-donut-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdumptyd%2Fvue-css-donut-chart/lists"}