{"id":13727424,"url":"https://github.com/toomuchdesign/react-minimal-pie-chart","last_synced_at":"2025-05-15T16:04:24.385Z","repository":{"id":19291064,"uuid":"84819480","full_name":"toomuchdesign/react-minimal-pie-chart","owner":"toomuchdesign","description":"🍰 Lightweight but versatile SVG pie/donut charts for React. \u003c 2kB gzipped.","archived":false,"fork":false,"pushed_at":"2025-05-09T10:44:53.000Z","size":13663,"stargazers_count":418,"open_issues_count":7,"forks_count":80,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-09T11:53:58.316Z","etag":null,"topics":["pie-chart","react-components","recharts","svg-path","typescript"],"latest_commit_sha":null,"homepage":"https://toomuchdesign.github.io/react-minimal-pie-chart/index.html","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/toomuchdesign.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","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,"zenodo":null}},"created_at":"2017-03-13T11:35:57.000Z","updated_at":"2025-05-09T10:44:56.000Z","dependencies_parsed_at":"2023-02-12T09:46:14.146Z","dependency_job_id":"71ae39d7-0938-453b-997b-5a089be371ad","html_url":"https://github.com/toomuchdesign/react-minimal-pie-chart","commit_stats":null,"previous_names":[],"tags_count":39,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toomuchdesign%2Freact-minimal-pie-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toomuchdesign%2Freact-minimal-pie-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toomuchdesign%2Freact-minimal-pie-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toomuchdesign%2Freact-minimal-pie-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/toomuchdesign","download_url":"https://codeload.github.com/toomuchdesign/react-minimal-pie-chart/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253247274,"owners_count":21877900,"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":["pie-chart","react-components","recharts","svg-path","typescript"],"created_at":"2024-08-03T01:03:55.343Z","updated_at":"2025-05-15T16:04:24.356Z","avatar_url":"https://github.com/toomuchdesign.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# React minimal pie chart\n\n[![Build Status][ci-badge]][ci]\n[![Npm version][npm-version-badge]][npm]\n[![Coveralls][coveralls-badge]][coveralls]\n[![Bundle size][bundlephobia-badge]][bundlephobia]\n\nLightweight React **SVG pie charts**, with **versatile options** and **CSS animation** included. **~2kB** gzipped. [👏 Demo 👏][storybook].\n\n\u003cp align=\"center\"\u003e\n  \u003cimg\n    width=\"350px\"\n    src=\"docs/chart.gif?raw=true\"\n    alt=\"React minimal pie chart preview\"\n  /\u003e\n\u003c/p\u003e\n\n## Why?\n\nBecause [Recharts][recharts-github] is awesome, but when you just need a simple pie/donought chart, **2kB** are usually enough.\n\n|                                                        |                                         Size\u003cbr\u003eby Bundlefobia                                          | Benchmark Size \\* | Loading time\u003cbr\u003eon a slow 3g \\* |\n| :----------------------------------------------------: | :-----------------------------------------------------------------------------------------------------: | :---------------: | :-----------------------------: |\n|           react-minimal-pie-chart (_v9.0.0_)           |               [![Bundle size: React minimal pie chart][bundlephobia-badge]][bundlephobia]               |      1.99 KB      |             ~40 ms              |\n|         [rechart][recharts-github] (_v1.8.5_)          |             [![Bundle size: Recharts][recharts-bundlephobia-badge]][recharts-bundlephobia]              |      96.9 KB      |            ~1900 ms             |\n|     [victory-pie][victory-pie-github] (_v34.1.3_)      |         [![Bundle size: Victory pie][victory-pie-bundlephobia-badge]][victory-pie-bundlephobia]         |      50.5 KB      |            ~1100 ms             |\n| [react-apexcharts][react-apexcharts-github] (_v1.3.7_) | [![Bundle size: React apec charts][react-apexcharts-bundlephobia-badge]][react-apexcharts-bundlephobia] |     114.6 KB      |            ~2300 ms             |\n|       [react-vis][react-vis-github] (_v1.11.7_)        |            [![Bundle size: React vis][react-vis-bundlephobia-badge]][react-vis-bundlephobia]            |      78.3 KB      |            ~1600 ms             |\n\n\\* Benchmark carried out with [size-limit](https://github.com/ai/size-limit) with a \"real-world\" setup: see [benchmark repo](https://github.com/toomuchdesign/react-pie-charts-size). (What matter here are not absolute values but the relation between magnitudes)\n\n## Features\n\n- **\u003c 2kB** gzipped\n- Versatile: **Pie**, **Donut**, **Loading**, **Completion** charts (see [Demo][storybook])\n- Customizable chart **labels** and **CSS animations**\n- Written in **Typescript**\n- No dependencies\n\n## Installation\n\n```console\nnpm install react-minimal-pie-chart\n```\n\nIf you don't use a package manager, `react-minimal-pie-chart` exposes also an `UMD` module ready for the browser.\n\n```\nhttps://unpkg.com/react-minimal-pie-chart/dist/index.js\n```\n\nMinimum supported **Typescript** version: \u003e= `3.8`\n\n## Usage\n\n```js\nimport { PieChart } from 'react-minimal-pie-chart';\n\n\u003cPieChart\n  data={[\n    { title: 'One', value: 10, color: '#E38627' },\n    { title: 'Two', value: 15, color: '#C13C37' },\n    { title: 'Three', value: 20, color: '#6A2135' },\n  ]}\n/\u003e;\n```\n\n## Options\n\n\u003c!-- prettier-ignore-start --\u003e\n| Property              | Type                                  | Description                                                                                                                                                                                                                                                                               | Default    |\n| --------------------- | ------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |\n| [**data**][data-props-docs] | `DataEntry[]`                         | Source data. Each entry represents a chart segment                                                                                                                                                                                                                                               | []          |\n| **lineWidth**         | `number` (%)                          | Line width of each segment. Percentage of chart's radius                                                                                                                                                                                                              | 100        |\n| **startAngle**        | `number`                              | Start angle of first segment                                                                                                                                                                                                                                                              | 0          |\n| **lengthAngle**       | `number`                              | Total angle taken by the chart _(can be negative to make the chart clockwise!)_                                                                                                                                                                                                           | 360        |\n| **totalValue**        | `number`                              | Total value represented by the full chart                                                                                                                                                                                                                                                 | -          |\n| **paddingAngle**      | `number`                              | Angle between two segments                                                                                                                                                                                                                                                                | -          |\n| **rounded**           | `boolean`                                | Round line caps of each segment                                                                                                                                                                                                                                                           | -      |\n| **segmentsShift**     | `number`\u003c/br\u003eor:\u003c/br\u003e`(segmentIndex) =\u003e number`     | Translates segments radially. If `number` set, provide shift value relative to `viewBoxSize` space. If `function`, return a value for each segment.\u003c/br\u003e_(`radius` prop might be adjusted to prevent segments from overflowing chart's boundaries)_ | -          |\n| **segmentsStyle**     | `CSSObject`\u003c/br\u003eor:\u003c/br\u003e`(segmentIndex) =\u003e CSSObject`                  | Style object assigned to each segment. If `function`, return a value for each segment. *(Warning: SVG only supports [its own CSS props][svg-css])*.                                                                                                                                                            | -          |\n| **segmentsTabIndex**  | `number`                              | [`tabindex` attribute](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/tabindex) assigned to segments                                                                                                                                                                          | -          |\n| [**label**][label-props-docs] | `(labelRenderProps) =\u003e string \\| number \\| ReactElement` | A function returning a label value or the [SVG element][svg-elements] to be rendered as label                                                                                                                                          | -      |\n| **labelPosition**     | `number` (%)                          | Label position from origin. Percentage of chart's radius _(50 === middle point)_                                                                                                                                                                                                           | 50         |\n| **labelStyle**        | `CSSObject`\u003c/br\u003eor:\u003c/br\u003e`(segmentIndex) =\u003e CSSObject`                  | Style object assigned to each label. If `function` set, return style for each label.  *(Warning: SVG only supports [its own CSS props][svg-css])*.                                                                                                                                                             | -          |\n| **animate**           | `boolean`                                | Animate segments on component mount                                                                                                                                                                                                                                                       | -      |\n| **animationDuration** | `number`                              | Animation duration in ms                                                                                                                                                                                                                                                                  | 500        |\n| **animationEasing**   | `string`                              | A [CSS easing function](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function)                                                                                                                                                                                      | ease-out |\n| **reveal**            | `number` (%)                          | Turn on CSS animation and reveal just a percentage of each segment                                                                                                                                                                                                                        | -          |\n| **background**        | `string`                              | Segments' background color                                                                                                                                                                                                                                                                | -          |\n| **children**          | `ReactElement` (svg)               | Elements rendered as children of [SVG element][svg-elements] (eg. SVG `defs` and gradient elements)                                                                                                                                                                                               | -          |\n| **radius**            | `number` (user units)                 | Radius of the pie (relative to `viewBoxSize` space)                                                                                                                                                                                                                                       | 50         |\n| **center**            | `[number, number]`                 | x and y coordinates of center (relative to `viewBoxSize` space)                                                                                                                                                                                                                                  | [50, 50]         |\n| **viewBoxSize**       | `[number, number]`                    | `width` and `height` of SVG `viewBox` attribute                                                                                                                                                                                                                                           | [100, 100] |\n| **onBlur**            | `(e, segmentIndex) =\u003e void`                            | `onBlur` event handler for each segment                                                                                                                                                                                                                  | -          |\n| **onClick**           | `(e, segmentIndex) =\u003e void`                            | `onClick` event handler for each segment                                                                                                                                                                                                                 | -          |\n| **onFocus**           | `(e, segmentIndex) =\u003e void`                            | `onFocus` event handler for each segment                                                                                                                                                                                                                 | -          |\n| **onKeyDown**         | `(e, segmentIndex) =\u003e void`                            | `onKeyDown` event handler for each segment                                                                                                                                                                                                               | -          |\n| **onMouseOut**        | `(e, segmentIndex) =\u003e void`                            | `onMouseOut` event handler for each segment                                                                                                                                                                                                              | -          |\n| **onMouseOver**       | `(e, segmentIndex) =\u003e void`                            | `onMouseOver` event handler for each segment                                                                                                                                                                                                             | -          |\n|  | `.oOo.oOo.oOo.oOo.oOo.oOo.oOo.` | | |\n\u003c!-- prettier-ignore-end --\u003e\n\nProp types are exposed for convenience:\n\n```ts\nimport type { PieChartProps } from 'react-minimal-pie-chart';\n```\n\n### About `data` prop\n\n`data` prop expects an array of chart entries as follows:\n\n```typescript\ntype Data = {\n  color: string;\n  value: number;\n  key?: string | number;\n  title?: string | number;\n  [key: string]: any;\n}[];\n```\n\nEach entry accepts any custom property plus the following **optional ones**:\n\n- **`key`**: custom value to be used as [segments element keys](https://reactjs.org/docs/lists-and-keys.html)\n\n- **`title`**: [`title` element](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title) rendered as segment's child\n\n### Custom labels with `label` render prop\n\n`label` prop accepts a function returning the **string, number or element** rendered as label for each segment:\n\n```js\n\u003cPieChart\n  label={(labelRenderProps: LabelRenderProps) =\u003e\n    number | string | React.ReactElement | undefined | null\n  }\n/\u003e\n```\n\nThe function receives `labelRenderProps` object as single **argument**:\n\n```typescript\ntype LabelRenderProps = {\n  x: number;\n  y: number;\n  dx: number;\n  dy: number;\n  textAnchor: string;\n  dataEntry: {\n    ...props.data[dataIndex]\n    // props.data entry relative to the label extended with:\n    startAngle: number;\n    degrees: number;\n    percentage: number;\n  };\n  dataIndex: number;\n  style: React.CSSProperties;\n};\n```\n\n#### Label prop, common scenarios\n\nRender entries' values as labels:\n\n```js\nlabel={({ dataEntry }) =\u003e dataEntry.value}\n```\n\nRender segment's percentage as labels:\n\n```js\nlabel={({ dataEntry }) =\u003e `${Math.round(dataEntry.percentage)} %`}\n```\n\nSee examples in the [demo source](https://github.com/toomuchdesign/react-minimal-pie-chart/blob/v8.2.0/stories/index.tsx#L81).\n\n## How to\n\n### User interactions with the chart\n\nSee [demo](https://toomuchdesign.github.io/react-minimal-pie-chart/index.html?path=/story/example-interaction--click-mouseover-mouseout-callbacks) and relative source [here](https://github.com/toomuchdesign/react-minimal-pie-chart/blob/v8.0.0/stories/InteractionStory.tsx) and [here](https://github.com/toomuchdesign/react-minimal-pie-chart/blob/v8.0.0/stories/InteractionTabStory.tsx).\n\n### Custom tooltip\n\nSee [demo](https://toomuchdesign.github.io/react-minimal-pie-chart/index.html?path=/story/example-misc--tooltip-integration) and [relative source](https://github.com/toomuchdesign/react-minimal-pie-chart/blob/master/stories/components/Tooltip.tsx).\n\n## Browsers support\n\nHere is an updated [browsers support list 🔍](https://github.com/toomuchdesign/react-minimal-pie-chart/issues/129).\n\nThe main requirement of this library is an accurate rendering of [SVG Stroke properties](https://www.w3schools.com/graphics/svg_stroking.asp).\n\nPlease consider that [`Math.sign`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sign) and [`Object.assign`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) polyfills are required to support legacy browsers.\n\n## Misc\n\n### How svg arc paths work?\n\n- http://xahlee.info/js/svg_circle_arc.html\n- https://codepen.io/lingtalfi/pen/yaLWJG\n\n\u003c!-- http://users.ecs.soton.ac.uk/rfp07r/interactive-svg-examples/  --\u003e\n\n### How SVG animations work?\n\nThis library uses the `stroke-dasharray` + `stroke-dashoffset` animation strategy [described here](https://css-tricks.com/svg-line-animation-works/).\n\n## Todo's\n\n- Consider moving storybook deployment to CI\n- Consider using `transform` to mutate segments/labels positions\n- Consider abstracting React bindings to re-use business logic with other frameworks\n- Provide a way to supply `svg` element with any extra prop\n- Find a better solution to assign default props\n\n## Contributors\n\nThanks to you all ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://www.andreacarraro.it\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/4573549?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAndrea Carraro\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/toomuchdesign/react-minimal-pie-chart/commits?author=toomuchdesign\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/toomuchdesign/react-minimal-pie-chart/commits?author=toomuchdesign\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#infra-toomuchdesign\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e \u003ca href=\"https://github.com/toomuchdesign/react-minimal-pie-chart/commits?author=toomuchdesign\" title=\"Tests\"\u003e⚠️\u003c/a\u003e \u003ca href=\"https://github.com/toomuchdesign/react-minimal-pie-chart/pulls?q=is%3Apr+reviewed-by%3Atoomuchdesign\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/rufman\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/1128559?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eStephane Rufer\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/toomuchdesign/react-minimal-pie-chart/issues?q=author%3Arufman\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"https://github.com/toomuchdesign/react-minimal-pie-chart/commits?author=rufman\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/jaaberg\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/1413255?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJørgen Aaberg\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/toomuchdesign/react-minimal-pie-chart/commits?author=jaaberg\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://www.tobiahrex.com\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/16377119?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eTobiah Rex\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/toomuchdesign/react-minimal-pie-chart/issues?q=author%3ATobiahRex\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://edwardxiao.com\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/11728228?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eEdward Xiao\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/toomuchdesign/react-minimal-pie-chart/issues?q=author%3Aedwardfhsiao\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://keybase.io/konsumer\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/83857?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDavid Konsumer\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/toomuchdesign/react-minimal-pie-chart/commits?author=konsumer\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/toomuchdesign/react-minimal-pie-chart/commits?author=konsumer\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#example-konsumer\" title=\"Examples\"\u003e💡\u003c/a\u003e \u003ca href=\"#ideas-konsumer\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/nehoraigold\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/44398222?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eOri\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#ideas-nehoraigold\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://www.manos.im/\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/6333409?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eEmmanouil Konstantinidis\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/toomuchdesign/react-minimal-pie-chart/issues?q=author%3Amanosim\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/yuruc\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/5884342?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eyuruc\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/toomuchdesign/react-minimal-pie-chart/commits?author=yuruc\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://www.linkedin.com/in/luca-schiavone-7270a8138/\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/16616566?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eluca-esse \u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/toomuchdesign/react-minimal-pie-chart/issues?q=author%3Aluca-esse\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://twitter.com/Osuka42\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/5117006?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eOscar Mendoza\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/toomuchdesign/react-minimal-pie-chart/issues?q=author%3AOsuka42g\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"https://github.com/toomuchdesign/react-minimal-pie-chart/commits?author=Osuka42g\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/damien-git\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/7503971?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003edamien-git\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/toomuchdesign/react-minimal-pie-chart/issues?q=author%3Adamien-git\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"#ideas-damien-git\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://www.linkedin.com/in/vianneystroebel/\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/628818?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eVianney Stroebel\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/toomuchdesign/react-minimal-pie-chart/issues?q=author%3Avibl\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"#ideas-vibl\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://xumi.fr\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/204001?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMaxime Zielony\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/toomuchdesign/react-minimal-pie-chart/issues?q=author%3Axumi\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"https://github.com/toomuchdesign/react-minimal-pie-chart/commits?author=xumi\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/razked\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/39411034?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRaz Kedem\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/toomuchdesign/react-minimal-pie-chart/issues?q=author%3Arazked\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/slumbering\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/1186424?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBlocksmith\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/toomuchdesign/react-minimal-pie-chart/issues?q=author%3Aslumbering\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://jamietalbot.com\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/425787?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJamie Talbot\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/toomuchdesign/react-minimal-pie-chart/issues?q=author%3Amajelbstoat\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://timeslikethese.ca\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/22269057?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eOscar Yixuan Chen\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/toomuchdesign/react-minimal-pie-chart/issues?q=author%3Aairoscar\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/RuiRocha1991\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/29250466?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRuiRocha1991\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/toomuchdesign/react-minimal-pie-chart/issues?q=author%3ARuiRocha1991\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/Romaboy\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/42248135?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRoman Kushyn\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/toomuchdesign/react-minimal-pie-chart/issues?q=author%3ARomaboy\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://bogas04.github.io/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/6177621?v=4?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDivjot Singh\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/toomuchdesign/react-minimal-pie-chart/commits?author=bogas04\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\n[ci-badge]: https://github.com/toomuchdesign/react-minimal-pie-chart/actions/workflows/ci.yml/badge.svg\n[ci]: https://github.com/toomuchdesign/react-minimal-pie-chart/actions/workflows/ci.yml\n[coveralls-badge]: https://coveralls.io/repos/github/toomuchdesign/react-minimal-pie-chart/badge.svg?branch=master\n[coveralls]: https://coveralls.io/github/toomuchdesign/react-minimal-pie-chart?branch=master\n[npm]: https://www.npmjs.com/package/react-minimal-pie-chart\n[npm-version-badge]: https://img.shields.io/npm/v/react-minimal-pie-chart.svg\n[bundlephobia-badge]: https://badgen.net/bundlephobia/minzip/react-minimal-pie-chart\n[bundlephobia]: https://bundlephobia.com/result?p=react-minimal-pie-chart\n[recharts-bundlephobia-badge]: https://badgen.net/bundlephobia/minzip/recharts\n[recharts-bundlephobia]: https://bundlephobia.com/result?p=recharts\n[recharts-github]: https://github.com/recharts/recharts\n[victory-pie-bundlephobia-badge]: https://badgen.net/bundlephobia/minzip/victory-pie\n[victory-pie-bundlephobia]: https://bundlephobia.com/result?p=victory-pie\n[victory-pie-github]: https://github.com/FormidableLabs/victory\n[react-apexcharts-bundlephobia-badge]: https://badgen.net/bundlephobia/minzip/apexcharts\n[react-apexcharts-bundlephobia]: https://bundlephobia.com/result?p=apexcharts\n[react-apexcharts-github]: https://github.com/apexcharts/apexcharts.js\n[react-vis-bundlephobia-badge]: https://badgen.net/bundlephobia/minzip/react-vis\n[react-vis-bundlephobia]: https://bundlephobia.com/result?p=react-vis\n[react-vis-github]: https://github.com/uber/react-vis\n[storybook]: https://toomuchdesign.github.io/react-minimal-pie-chart/index.html\n[data-props-docs]: #about-data-prop\n[label-props-docs]: #custom-labels-with-label-render-prop\n[svg-elements]: https://developer.mozilla.org/en-US/docs/Web/SVG/Element\n[svg-css]: https://css-tricks.com/svg-properties-and-css/#aa-properties-shared-between-css-and-svg\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftoomuchdesign%2Freact-minimal-pie-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftoomuchdesign%2Freact-minimal-pie-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftoomuchdesign%2Freact-minimal-pie-chart/lists"}