@garvae/react-pie-donut-chart v1.0.3

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

or

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:

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.

📄 License - MIT