DEPRECATED

⛔ This package was deprecated

✔️Please use the new more powerful and flexible version: react-pie-donut-chart

react-pie-chart

Description

Lightweight react "pie" chart.

Features

• responsive (svg re-renders when it's needed)
• ability to show some text in center "donut hole"
• ready for TypeScript

Variants

Notes

You can choose if you want to resize the chart based on the parent size or if you want to set the size manually. If you want resizable chart, you must be sure the parent container does not have zero width and height. If you want to set the size manually just add the size property

Installation

npm install @garvae/react-pie-chart

or

yarn add @garvae/react-pie-chart

Properties

Required

Data - an array of objects with properties described below:

| Name | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | color | string | - | + | Color of chart segment. Must be a CSS 'color' type | | order | number | - | + | Order of segment in pie chart map | | segmentId | string | - | + | Unique id of chart segment | | value | number | - | + | Value of segment |

Required if size prop isn't given

parentRef - React.RefObject.<HTMLDivElement> - Ref to container element

Required if parentRef prop isn't given

size - number - Chart size. Chart element will not be resizable when this property is given

Optional

| Name | Type | Default | Description | | --- | --- | --- | --- | | className | string | | SVG className | | donutHoleClassName | string | | Center circle className | | donutHoleColor | string | "#ffffff" | Center circle color | | donutHoleRadius | number | 27.5% of calculated container size | Center circle radius | | donutSegmentClassName | string | | Circle segment className | | fontSize | string | | Center circle text size. Must be a CSS 'fontSize' type: 'px' | | minSize | number | | Chart minimum size | | text | string | | Center circle text. Must be short enough to fit in the center of the chart. Center circle will not be shown when this property is not given. | | textClassName | string | | ClassName of the element that wraps center circle text | | textColor | string | | Center circle text color | | textGroupClassName | string | | (group) element that wraps center circle text | | textSvgObjectClassName | string | | element that wraps center circle text | | debounceTime | number | 50 | Prevents unnecessary re-renders. Default 50ms. Debounce disabled when 'debounceTime' = 0 or when 'size' property value is given |

Example

import ChartPie from '@garvae/react-pie-chart'

const DATA = [
    {
        color: '#e74949',
        order: 1,
        segmentId: '001',
        value: 12,
    },
    {
        color: '#49bae7',
        order: 2,
        segmentId: '002',
        value: 17,
    },
    {
        color: '#e7a849',
        order: 3,
        segmentId: '003',
        value: 18,
    },
    {
        color: '#e76e49',
        order: 4,
        segmentId: '004',
        value: 9,
    },
    {
        color: '#78e749',
        order: 5,
        segmentId: '005',
        value: 30,
    }
]

const App = () => {
    const ref = React.useRef<HTMLDivElement>(null)

    return (
      <div
       ref={ref}
       // here we use parent container size to resize chart depends on it 
       style={{
              display: 'flex',
              width: '600px',
              height: '600px',
          }}
      >
          <ChartPie data={DATA} parentRef={ref}/>
      </div>
    );
};

Author

🙋‍♂️ Vova_Garvae

• Facebook: @garvae
• LinkedIn: @garvae
• Twitter: @vgarvae
• Github: @garvae

🤝 Contributing

Contributions, issues and feature requests are welcome!Feel free to check issues page. You can also take a look at the contributing guide.

Show your support

Give a ⭐ and your ❤️ if this project helped you!

❤️️ https://ko-fi.com/garvae

❤️️ https://pay.cloudtips.ru/p/859caa2a