This package has been deprecated

@garvae/react-pie-chart
TypeScript icon, indicating that this package has built-in type declarations

1.1.5-deprecated • Public • Published

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

react-pie-chart 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

🤝 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

Package Sidebar

Install

npm i @garvae/react-pie-chart

Weekly Downloads

17

Version

1.1.5-deprecated

License

MIT

Unpacked Size

21.1 kB

Total Files

5

Last publish

Collaborators

  • vgarvae