{"id":26400572,"url":"https://github.com/garvae/react-pie-donut-chart","last_synced_at":"2025-10-28T02:39:29.308Z","repository":{"id":58015307,"uuid":"529576751","full_name":"garvae/react-pie-donut-chart","owner":"garvae","description":"Lightweight library allows you to create \"pie\" and \"donut\" charts easily","archived":false,"fork":false,"pushed_at":"2023-03-01T15:15:03.000Z","size":23076,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-25T21:48:50.168Z","etag":null,"topics":["arc","arc-chart","chart","component","data-visualization","donut","donut-chart","pie","pie-chart","react","react-chart","react-donut","react-donut-chart","react-pie","react-pie-chart","reactjs","svg","visualization"],"latest_commit_sha":null,"homepage":"https://github.com/garvae/react-pie-donut-chart","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/garvae.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-08-27T12:18:41.000Z","updated_at":"2025-04-18T12:25:17.000Z","dependencies_parsed_at":"2022-08-28T00:00:55.669Z","dependency_job_id":null,"html_url":"https://github.com/garvae/react-pie-donut-chart","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/garvae/react-pie-donut-chart","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garvae%2Freact-pie-donut-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garvae%2Freact-pie-donut-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garvae%2Freact-pie-donut-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garvae%2Freact-pie-donut-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/garvae","download_url":"https://codeload.github.com/garvae/react-pie-donut-chart/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/garvae%2Freact-pie-donut-chart/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259302558,"owners_count":22837168,"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":["arc","arc-chart","chart","component","data-visualization","donut","donut-chart","pie","pie-chart","react","react-chart","react-donut","react-donut-chart","react-pie","react-pie-chart","reactjs","svg","visualization"],"created_at":"2025-03-17T14:26:51.229Z","updated_at":"2025-10-28T02:39:24.274Z","avatar_url":"https://github.com/garvae.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-pie-donut-chart\n\n## Description\nThis lightweight library allows you to create \"pie\" and \"donut\" charts easily\n\nThe chart component has very flexible settings. It can accept a passed size\nor automatically adjust to the size of the parent component.\nMoreover, this component is accessible.\n\n## Features\n- ✔️lightweight\n- ✔️flexible settings\n- ✔️both \"Donut\" \u0026 \"Pie\" variants\n- ✔️accessible\n- ✔️responsive (svg re-renders when it's needed)\n- ✔️ability to show some text in the center of the chart\n- ✔️ready for TypeScript\n- ✔️detailed documentation\n- ✔️100% Tests-covered \n\n---\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/garvae/react-pie-donut-chart/master/doc/assets/img/cover.svg\" alt=\"cover\" width=\"100%\" height=\"auto\"\u003e\n\u003c/p\u003e \n\n---\n\n## 🎬 Demo [video](https://user-images.githubusercontent.com/57904389/187030090-12e0d8cd-d497-459f-b322-ffa020171015.mp4)\n\n\u003cp align=\"center\"\u003e\n    \u003cvideo src=\"https://user-images.githubusercontent.com/57904389/187030090-12e0d8cd-d497-459f-b322-ffa020171015.mp4\" alt=\"react-pie-donut-chart variants\" width=\"100%\" height=\"auto\"\u003e\n\u003c/p\u003e  \n\n\n\u003cbr/\u003e\n\n\u003e ⚠️ If the video is not loading, try going to the [GitHub repo](https://github.com/garvae/react-pie-donut-chart) or using the [direct link](https://user-images.githubusercontent.com/57904389/187030090-12e0d8cd-d497-459f-b322-ffa020171015.mp4)\n\n\u003e 🌐 Demo page coming soon\n\n\u003cbr/\u003e\n\n## 🔧 Installation\n\n```sh\nnpm install @garvae/react-pie-donut-chart\n```\nor\n```sh\nyarn add @garvae/react-pie-donut-chart\n```\n\n\u003cbr/\u003e\n\n\u003chr/\u003e\n\n## ⚙️Properties\n\n\n\u003cbr/\u003e\n\n### ❕ Required props\n\n\u003cbr/\u003e\n\n#### `Data` prop\n\n\u003e Chart data. An array of objects (`Array\u003cTDataItem\u003e`) with properties described below:\n\n|\tName\t|\tType\t|\tDefault\t|\tRequired\t|\tDescription\t|\n|\t:---\t|\t:---\t|\t:----------:\t|\t:---:\t|\t:---\t|\n|\tcolor\t|\tstring\t|\tundefined\t|\t-\t|\tThe color of the chart segment. Must be CSS type 'color'. Default generated automatically\t|\n|\torder\t|\tnumber\t|\tundefined\t|\t-\t|\tOrder of segments in a chart. Default generated automatically\t|\n|\tsegmentId\t|\tstring\t|\tundefined\t|\t-\t|\tThe unique ID of the chart segment. Default generated automatically\t|\n|\tvalue\t|\tnumber\t|\tundefined\t|\t+\t|\tSegment value\t|\n\n\u003cbr/\u003e\n\n#### `parentRef` prop - Required if the `size` prop is not passed\n\n|\tName\t|\tType\t|\tDefault\t|\tDescription\t|\n|\t:---\t|\t:---\t|\t:----------:\t|\t:---\t|\n|\tparentRef\t|\tRefObject\u003cHTMLElement\u003e\t|\tundefined\t|\tRef to the parent `HTMLElement`\t|\n\n\n\u003cbr/\u003e\n\n#### `size` prop - Required if the `parentRef` prop is not passed\n\n|\tName\t|\tType\t|\tDefault\t|\tDescription\t|\n|\t:---\t|\t:---\t|\t:----------:\t|\t:---\t|\n|\tsize\t|\tnumber\t|\tundefined\t|\tChart size\t|\n\n\n\n\u003chr/\u003e\n\n\u003cbr/\u003e\n\n### ❔ Optional props\n\n\u003cbr/\u003e\n\n|\tName\t|\tType\t|\tDefault\t|\tDescription\t|\n|\t:---\t|\t:---\t|\t:----------:\t|\t:---\t|\n|\t**animationSpeed**\t|\t`number`\t|\t`200`\t|\tThe speed (in milliseconds) of the animation when the values of the chart element change\t|\n|\t**chartCenterSize**\t|\t`number`\t|\t`undefined`\t|\tThe name of the chart center class. The \"chart center\" is the svg element above the main chart. It's kind of like a text background. \"Chart center\" will not be shown without \"chartCenterSize\" parameter. Don't use it if you just want to create a donut-type chart, it's better to pass the parameter \"donutThickness\" instead\t|\n|\t**children**\t|\t`ReactNode | string | number`\t|\t`undefined`\t|\t\"Children\" to render in the center of the chart.\t|\n|\t**className**\t|\t`string`\t|\t`undefined`\t|\tMain \u003cSVG\u003e className\t|\n|\t**classNames**\t|\t`string`\t|\t`undefined`\t|\tChart elements classNames\t|\n|\t**colors**\t|\t`string`\t|\t`undefined`\t|\tChart elements colors\t|\n|\t**resizeReRenderDebounceTime**\t|\t`number`\t|\t`50`\t|\tPrevents unnecessary re-renders. Debounce is disabled when 'resizeReRenderDebounceTime' = 0 or when the value of the \"size\" property is set\t|\n|\t**donutThickness**\t|\t`number`\t|\t`undefined`\t|\tThe thickness of the donut segments. You should pass this prop if you want to create a donut chart.\t|\n|\t**fontSize**\t|\t`number`\t|\t`undefined`\t|\tThe font size. By default, it calculates automatically to fit the size of the whole chart (outer radius) if the chart is \"Pie\" type. If the chart is \"Donut\" type this param calculates automatically to fit the size of \"donut hole\" (inner radius).\t|\n|\t**gap**\t|\t`number`\t|\t`undefined`\t|\tGap between segments\t|\n|\t**hoverScaleRatio**\t|\t`number`\t|\t`1.05`\t|\tThe ratio of the \"scale\" of the segment when it's hovered, selected or focused\t|\n|\t**isScaleOnHover**\t|\t`boolean`\t|\t`TRUE`\t|\tEnables or disables \"scale\" of the segment when it's hovered, active or focused\t|\n|\t**isSelectOnClick**\t|\t`boolean`\t|\t`TRUE`\t|\tEnables or disables segment selection on click on it\t|\n|\t**isSelectOnKeyEnterDown**\t|\t`boolean`\t|\t`TRUE`\t|\tEnables or disables segment selection on \"enter\" key press on it\t|\n|\t**isSelectedValueShownInCenter**\t|\t`boolean`\t|\t`TRUE`\t|\tEnables or disables the display of the value of the selected segment in the center of the chart\t|\n|\t**maxSize**\t|\t`number`\t|\t`undefined`\t|\tChart maximum size.\t|\n|\t**minSize**\t|\t`number`\t|\t`undefined`\t|\tChart minimum size\t|\n|\t**stylesHoveredSegment**\t|\t`CSSProperties`\t|\t`undefined`\t|\tYour own styles for hovered, selected or focused segments\t|\n|\t**onSegmentClick**\t|\t`(segmentId: string) =\u003e void`\t|\t`undefined`\t|\tCallback for segment \"onClick\" event\t|\n|\t**onSegmentKeyEnterDown**\t|\t`(segmentId: string) =\u003e void`\t|\t`undefined`\t|\tCallback for segment \"onKeydown\" event. Fires only for the \"enter\" key\t|\n|\t**selected**\t|\t`string`\t|\t`undefined`\t|\tSelected segment ID. In most cases you don't need it. But if you want to control this state manually - welcome =)\t|\n|\t**widthSegmentFocusedOutline**\t|\t`number`\t|\t`4`\t|\tThe width of the \"outline\" (stroke) of the focused segment. By default, it automatically resizes based on chart size and has a ratio of 0.0066. This means that this stroke width = \u003cchart_size\u003e * 0.0066\t|\n|\t**tabIndex**\t|\t`number`\t|\t`0`\t|\tEnables or disables chart navigation with a \"tab\". Default - accessible - you can navigate the chart with the keyboard (\"tab\" button) And in most cases there is no reason to change it.\t|\n|\t**text**\t|\t`string`\t|\t`undefined`\t|\tText to show in the center of the chart. By default, it shows the total value of the provided \"data\" or the value of the selected segment or the value of the focused segment\t|\n\n\u003cbr/\u003e\n\n##### 📌 Notes\n\n\u003e You can choose whether you want to resize the chart based on the \"parent\" size or if you want to set the size manually.\n\u003e If you need a resizable chart, you must be sure that the parent container does not have zero width and height.\n\u003e If you want to set the size manually just add the `size` property\n\n\u003e The `Chart` has a lot of flexible settings. You can check them out above.\n\n\u003e Read more about `classNames` \u0026 `colors` props below\n\n\u003cbr/\u003e\n\n\n##### 📌 Additional info about `classNames` \u0026 `colors` props\n\n\u003cbr/\u003e\n\n##### `classNames` prop - Chart elements classNames. An object with following props:\n\n|\tName\t|\tType\t|\tDefault\t|\tDescription\t|\n|\t:---\t|\t:---\t|\t:----------:\t|\t:---\t|\n|\t**chartBackground**\t|\t`string`\t|\t`undefined`\t|\tChart background className. Background - svg element the same size as the chart, and it is rendered if 'colorSegmentsBackground' property is provided\t|\n|\t**chartCenter**\t|\t`string`\t|\t`undefined`\t|\tCenter circle (donut hole) className\t|\n|\t**chartSegment**\t|\t`string`\t|\t`undefined`\t|\tChart segment className\t|\n|\t**chartSegmentsBackground**\t|\t`string`\t|\t`undefined`\t|\tChart segment background className\t|\n|\t**children**\t|\t`string`\t|\t`undefined`\t|\tChart children className\t|\n|\t**svgGroupSegments**\t|\t`string`\t|\t`undefined`\t|\tChart segments group \u003cg\u003e element className\t|\n|\t**svgGroupSegmentsBackground**\t|\t`string`\t|\t`undefined`\t|\tChart segments group \u003cg\u003e element className. This background is another \u003cg\u003e element under the chart segments group \u003cg\u003e element\t|\n|\t**svgGroupText**\t|\t`string`\t|\t`undefined`\t|\tChart text group \u003cg\u003e element className\t|\n|\t**svgObjectText**\t|\t`string`\t|\t`undefined`\t|\tChart text \u003cforeignObject\u003e element className. \u003cforeignObject\u003e is something like element-wrapper for the text container\t|\n|\t**text**\t|\t`string`\t|\t`undefined`\t|\tText \u003cdiv\u003e container className\t|\n\n\u003cbr/\u003e\n\n##### `colors` prop - Chart elements colors. An object with following props:\n\n|\tName\t|\tType\t|\tDefault\t|\tDescription\t|\n|\t:---\t|\t:---\t|\t:----------:\t|\t:---\t|\n|\t**chartBackground**\t|\t`string`\t|\t`undefined`\t|\tColor of the chart background. Background is svg element same size with chart. Not renders if this param was not passed\t|\n|\t**chartCenter**\t|\t`string`\t|\t`#ffffff`\t|\tCenter circle (donut hole) color\t|\n|\t**segmentFocusedOutline**\t|\t`string`\t|\t`#287bc8`\t|\tFocused segments outline (stroke) color\t|\n|\t**segmentsBackground**\t|\t`string`\t|\t`undefined`\t|\tBackground color of the chart segments background element. `Segments background` is an svg element same size with chart. 1. Not renders if this param was not passed 2. This is not the segments background. This is background of element under all segments. Sounds complicated, I know... But it needed if you want to create a chart with gaps between segments and to color this space (`gap`) between segments. When the chart is `Pie` type this param works same like 'colorChartBackground' prop, but if chart is `Donut` type then current param will color only the circle under the segments but not the whole chart\t|\n|\t**text**\t|\t`string`\t|\t`undefined`\t|\tThe color of the text. By default, it will be same color with selected segment (if any segment is selected) or same color with the biggest value in the \"data\" array.\t|\n\n\u003e Make sure the colors provided to the \"PieDonutChart\" meet the following requirements: \u003cbr/\u003e \u003cbr/\u003e\n\u003e Color must be only `HEX` string and must be\n\u003e - 7-characters starts with \"#\" symbol - `'#ffffff'`\n\u003e - or 6-characters without \"#\" symbol - `'ffffff'`\n\u003e - or 4-characters starts with \"#\" symbol - `'#fff'`\n\u003e - or 3-characters without \"#\" symbol - `fff`\n\n\u003cbr/\u003e\n\n\u003chr/\u003e\n\n\n## 🚀️ Example\n\n```typescript jsx\nimport PieDonutChart, { DataItem } from '@garvae/react-pie-donut-chart';\nimport React from 'react';\n\nconst DATA: DataItem[] = [\n    {\n        color: '#287BC8',\n        id: '001',\n        order: 1,\n        value: 10,\n    },\n    {\n        color: '#D64045',\n        id: '002',\n        order: 2,\n        value: 40,\n    },\n    {\n        color: '#daf6ec',\n        id: '003',\n        order: 3,\n        value: 30,\n    },\n    {\n        color: '#9ED8DB',\n        id: '004',\n        order: 4,\n        value: 20,\n    },\n    {\n        color: '#2B2D42',\n        id: '005',\n        order: 5,\n        value: 50,\n    },\n];\n\n// \"Pie\" type chart variant with \"parentRef\" prop (auto-resize)\nconst ChartPieAutoResize = () =\u003e {\n    const ref = React.useRef\u003cHTMLDivElement\u003e(null);\n\n    return (\n        \u003cdiv\n            ref={ref}\n            style={{ height: '300px', width: '300px' }}\n        \u003e\n            \u003cPieDonutChart\n                data={DATA}\n                parentRef={ref}\n            /\u003e\n        \u003c/div\u003e\n    );\n};\n\n// \"Pie\" type chart variant with \"size\" prop (no auto-resize)\nconst ChartPieWithFixedSize = () =\u003e {\n    return (\n        \u003cPieDonutChart\n            data={DATA}\n            size={300}\n        /\u003e\n    );\n};\n\n// \"Donut\" type chart variant with \"size\" prop (no auto-resize)\nconst ChartDonutWithFixedSize = () =\u003e {\n    return (\n        \u003cPieDonutChart\n            data={DATA}\n            gap={10}\n            size={300}\n        /\u003e\n    );\n};\n```\n\n\u003cbr/\u003e\n\n\u003chr/\u003e\n\n## 🙋‍♂ Author - **Garvae**\n\n- Facebook: [@garvae](https://www.facebook.com/garvae)\n- LinkedIn: [@garvae](https://linkedin.com/in/garvae)\n- Twitter: [@vgarvae](https://twitter.com/vgarvae)\n- Github: [@garvae](https://github.com/garvae)\n\n## ❤ Show your support\n\nGive a  ⭐ if this project helped you!\n\n## 🤝 Contributing\n\nContributions, issues and feature requests are welcome!\u003cbr /\u003eFeel free to check [issues page](https://www.github.com/garvae/react-pie-donut-chart/issues). You can also take a look at the [contributing guide](https://wwwhub.com/garvae/react-pie-donut-chart/raw/master/CONTRIBUTING.md).\n\n\u003cbr/\u003e\n\n\u003chr/\u003e\n\n## 📄 [License - MIT](https://github.com/garvae/react-pie-donut-chart/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgarvae%2Freact-pie-donut-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgarvae%2Freact-pie-donut-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgarvae%2Freact-pie-donut-chart/lists"}