{"id":39915028,"url":"https://github.com/vonbearshark/react-donut-chart","last_synced_at":"2026-01-18T16:36:30.063Z","repository":{"id":39522011,"uuid":"62733521","full_name":"vonbearshark/react-donut-chart","owner":"vonbearshark","description":"An extendable SVG donut chart React component","archived":false,"fork":false,"pushed_at":"2024-01-07T08:38:45.000Z","size":2852,"stargazers_count":28,"open_issues_count":0,"forks_count":23,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-08-23T18:24:54.108Z","etag":null,"topics":["chart","react","svg"],"latest_commit_sha":null,"homepage":"https://react-donut-chart.netlify.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vonbearshark.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2016-07-06T15:46:59.000Z","updated_at":"2024-11-25T00:14:35.000Z","dependencies_parsed_at":"2024-06-18T18:23:58.147Z","dependency_job_id":"3e9a6be5-1c24-4b93-80a2-9b23cd58ce14","html_url":"https://github.com/vonbearshark/react-donut-chart","commit_stats":{"total_commits":33,"total_committers":5,"mean_commits":6.6,"dds":0.303030303030303,"last_synced_commit":"99e80baa20752651e3078895ea2a6930ed7c9ee2"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/vonbearshark/react-donut-chart","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vonbearshark%2Freact-donut-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vonbearshark%2Freact-donut-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vonbearshark%2Freact-donut-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vonbearshark%2Freact-donut-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vonbearshark","download_url":"https://codeload.github.com/vonbearshark/react-donut-chart/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vonbearshark%2Freact-donut-chart/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28542058,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-18T14:59:57.589Z","status":"ssl_error","status_checked_at":"2026-01-18T14:59:46.540Z","response_time":98,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","react","svg"],"created_at":"2026-01-18T16:36:29.041Z","updated_at":"2026-01-18T16:36:30.053Z","avatar_url":"https://github.com/vonbearshark.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-donut-chart\n\nAn extendable SVG-based donut chart React component.\n\n![Example](https://github.com/vonbearshark/react-donut-chart/raw/main/example.gif)\n\n---\n\n## Installation\n\n`npm install react-donut-chart --save`\n\n---\n\n## Usage\n\n```js\nimport DonutChart from 'react-donut-chart';\n\n// things I would never do:\n\u003cDonutChart\n  data={[\n    {\n      label: 'Give you up',\n      value: 25,\n    },\n    {\n      label: '',\n      value: 75,\n      isEmpty: true,\n    },\n  ]}\n/\u003e;\n```\n\nView the demo [online](http://react-donut-chart.netlify.app)\n\n---\n\n## Props\n\n| Name           | Required | Default                                                                                                                                                                                                   | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |\n| -------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| data           | true     | \u003ccode\u003e[{\u003cbr\u003e\u0026nbsp;\u0026nbsp;value: 100,\u003cbr\u003e\u0026nbsp;\u0026nbsp;label: '',\u003cbr\u003e\u0026nbsp;\u0026nbsp;isEmpty:true\u003cbr\u003e}]\u003c/code\u003e                                                                                                    | The chart data                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |\n| className      | false    | `donutchart`                                                                                                                                                                                              | This is the `className` given to the top-level `svg` element. All subclasses are prefixed from this name: \u003cul\u003e\u003cli\u003e\u003ccode\u003e${className}-arcs\u003c/code\u003e accesses the entire graph area\u003c/li\u003e\u003cul\u003e\u003cli\u003e\u003ccode\u003e${className}-arcs-paths\u003c/code\u003e accesses the individual arc paths\u003c/li\u003e\u003c/ul\u003e\u003cli\u003e\u003ccode\u003e${className}-innertext\u003c/code\u003e accesses all of the text within the inner donut area\u003c/li\u003e\u003cul\u003e\u003cli\u003e\u003ccode\u003e${className}-innertext-label\u003c/code\u003e accesses the label within this area\u003c/li\u003e\u003cli\u003e\u003ccode\u003e${className}-innertext-value\u003c/code\u003e accesses the value within this area\u003c/li\u003e\u003c/ul\u003e\u003cli\u003e\u003ccode\u003e${className}-legend\u003c/code\u003e accesses the legend component\u003c/li\u003e\u003cul\u003e\u003cli\u003e\u003ccode\u003e${className}-legend\u003c/code\u003e accesses the legend rectangle items\u003c/li\u003e\u003cli\u003e\u003ccode\u003e${className}-legend-label\u003c/code\u003e accesses the labels of the legend items\u003c/li\u003e\u003c/ul\u003e\u003c/ul\u003e In addition the `selected` class is given to selected items, the `toggled` class to all toggled items, and the `isEmpty` class to all `isEmpty` items. All style (and animations) can be manipulated from the CSS |\n| height         | false    | `500`                                                                                                                                                                                                     | Height of the entire component                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |\n| width          | false    | `750`                                                                                                                                                                                                     | Width of the entire component. If no legend is specified, then the chart takes up the entire width. If a legend is toggled, then the chart takes up 2/3 of the width, and the legend takes up 1/3                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |\n| colors         | false    | `['#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722', '#795548', '#607d8b' ]` | An array of colors (could be hex strings or named colors) for the data items. Defaults to an array of Google colors                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |\n| emptyColor     | false    | `'#e0e0e0'`                                                                                                                                                                                               | A color for empty data items, defaults to gray                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |\n| strokeColor    | false    | `'#212121'`                                                                                                                                                                                               | A color for the stroke around the items in the graph and legend, defaults to black                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |\n| colorFunction  | false    | `(colors, index) =\u003e colors[(index % colors.length)]`                                                                                                                                                      | The default cycles through the array of colors and loops for excess                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |\n| innerRadius    | false    | `0.70`                                                                                                                                                                                                    | The inner donut radius                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |\n| outerRadius    | false    | `0.90`                                                                                                                                                                                                    | The outer donut radius                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |\n| selectedOffset | false    | `0.03`                                                                                                                                                                                                    | The `outerRadius` offset when an item is selected                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |\n| emptyOffset    | false    | `0.08`                                                                                                                                                                                                    | The `innerRadius` and `outerRadius` offset on `isEmpty` items                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |\n| toggledOffset  | false    | `0.04`                                                                                                                                                                                                    | The `innerRadius` and `outerRadius` offset on toggle-clicked items                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |\n| formatValues   | false    | `` (values, total) =\u003e `${(values / total * 100).toFixed(2)}%`  ``                                                                                                                                         | Custom format for values displayed in the donut chart's inner text area. By default formats as percentages rounded to two decimal places.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |\n| onMouseEnter   | false    | `(item) =\u003e item`                                                                                                                                                                                          | Callback that fires when an item is hovered                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |\n| onMouseLeave   | false    | `(item) =\u003e item`                                                                                                                                                                                          | Callback that fires when an item is unhovered                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |\n| onClick        | false    | `onClick: (item, toggled) =\u003e (toggled ? item : null)`                                                                                                                                                     | Callback that fires when an item is toggle-clicked                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |\n| legend         | false    | `true`                                                                                                                                                                                                    | Determines whether or not to create a legend                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |\n| clickToggle    | false    | `true`                                                                                                                                                                                                    | Determines whether or not to toggle-freeze the graph on the arc that has been clicked                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |\n| interactive    | false    | `true`                                                                                                                                                                                                    | Determines whether to add interactive handlers                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |\n\n---\n\n## Changelog\n\n### 1.3.0\n\n- Add `interactive` prop\n\n### 1.2.0\n\n- New module infrastructure\n- Typescript\n\n###\n\n...\n\n### 1.1.7\n\n- Updated dependencies for bug fixes\n- Updated linting\n\n###\n\n...\n\n### 1.0.3\n\n- Bug fixes when no data present and when 100%.\n\n### 1.0.2:\n\n- No legend offset by default\n- Hacking for condition of 100%.\n\n### 1.0.1:\n\n- Adding lib dist build process to fix importing/\n\n### 1.0.0:\n\n- Initial release with demo\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvonbearshark%2Freact-donut-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvonbearshark%2Freact-donut-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvonbearshark%2Freact-donut-chart/lists"}