@garvae/react-pie-donut-chart

v1.0.3

Published

2 years ago

Lightweight library allows you to create "pie" and "donut" charts easily

Downloads

1,362

react-pie-donut-chart

Description

This lightweight library allows you to create "pie" and "donut" charts easily

The chart component has very flexible settings. It can accept a passed size or automatically adjust to the size of the parent component. Moreover, this component is accessible.

Features

✔️lightweight
✔️flexible settings
✔️both "Donut" & "Pie" variants
✔️accessible
✔️responsive (svg re-renders when it's needed)
✔️ability to show some text in the center of the chart
✔️ready for TypeScript
✔️detailed documentation
✔️100% Tests-covered

🎬 Demo video

⚠️ If the video is not loading, try going to the GitHub repo or using the direct link

🌐 Demo page coming soon

🔧 Installation

npm install @garvae/react-pie-donut-chart

yarn add @garvae/react-pie-donut-chart

⚙️Properties

❕ Required props

`Data` prop

Chart data. An array of objects (Array<TDataItem>) with properties described below:

`parentRef` prop - Required if the `size` prop is not passed

`size` prop - Required if the `parentRef` prop is not passed

❔ Optional props

📌 Notes

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

The Chart has a lot of flexible settings. You can check them out above.

Read more about classNames & colors props below

📌 Additional info about `classNames` & `colors` props

`classNames` prop - Chart elements classNames. An object with following props:

`colors` prop - Chart elements colors. An object with following props:

| Name | Type | Default | Description | | :--- | :--- | :----------: | :--- | | chartBackground | string | undefined | Color of the chart background. Background is svg element same size with chart. Not renders if this param was not passed | | chartCenter | string | #ffffff | Center circle (donut hole) color | | segmentFocusedOutline | string | #287bc8 | Focused segments outline (stroke) color | | segmentsBackground | string | undefined | Background 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 | | text | string | undefined | The 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. |

Make sure the colors provided to the "PieDonutChart" meet the following requirements: Color must be only HEX string and must be
7-characters starts with "#" symbol - '#ffffff'
or 6-characters without "#" symbol - 'ffffff'
or 4-characters starts with "#" symbol - '#fff'
or 3-characters without "#" symbol - fff

🚀️ Example

import PieDonutChart, { DataItem } from '@garvae/react-pie-donut-chart';
import React from 'react';

const DATA: DataItem[] = [
    {
        color: '#287BC8',
        id: '001',
        order: 1,
        value: 10,
    },
    {
        color: '#D64045',
        id: '002',
        order: 2,
        value: 40,
    },
    {
        color: '#daf6ec',
        id: '003',
        order: 3,
        value: 30,
    },
    {
        color: '#9ED8DB',
        id: '004',
        order: 4,
        value: 20,
    },
    {
        color: '#2B2D42',
        id: '005',
        order: 5,
        value: 50,
    },
];

// "Pie" type chart variant with "parentRef" prop (auto-resize)
const ChartPieAutoResize = () => {
    const ref = React.useRef<HTMLDivElement>(null);

    return (
        <div
            ref={ref}
            style={{ height: '300px', width: '300px' }}
        >
            <PieDonutChart
                data={DATA}
                parentRef={ref}
            />
        </div>
    );
};

// "Pie" type chart variant with "size" prop (no auto-resize)
const ChartPieWithFixedSize = () => {
    return (
        <PieDonutChart
            data={DATA}
            size={300}
        />
    );
};

// "Donut" type chart variant with "size" prop (no auto-resize)
const ChartDonutWithFixedSize = () => {
    return (
        <PieDonutChart
            data={DATA}
            gap={10}
            size={300}
        />
    );
};

🙋‍♂ Author - Garvae

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

❤ Show your support

Give a ⭐ if this project helped you!

🤝 Contributing

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme