React Donut Chart Easy

Live Demo: View the live demo here 🚀

A customizable donut chart component built with React and styled using Tailwind CSS. This package allows you to easily integrate a donut chart into your React applications with various configuration options for customization.

Installation
Usage
Props
Legend Options
Customization
License

Installation

To install the react-donut-chart-easy package, run the following command:

npm install react-donut-chart-easy

Make sure you have Tailwind CSS set up in your project. If you haven't done that yet, follow the Tailwind CSS installation guide.

Usage

To use the DonutChart component, import it into your React component and provide the necessary props.

import React from "react";
import DonutChart from "react-donut-chart-easy";

const App = () => {
  const data = [
    { label: "Category 1", value: 30 },
    { label: "Category 2", value: 70 },
  ];

  return (
    <div className="flex justify-center items-center h-screen">
      <DonutChart
        data={data}
        width={300}
        height={300}
        colors={["#4A90E2", "#E94E77"]}
        strokeWidth={10}
        onClick={(data) => console.log(data)}
      />
    </div>
  );
};

export default App;

Props

The DonutChart component accepts the following props:

Prop	Type	Description
`data`	Array	An array of objects containing `label` and `value` for each segment.
`width`	Number	The width of the donut chart. Default is `300`.
`height`	Number	The height of the donut chart. Default is `300`.
`colors`	Array	An array of colors for the segments. Default is a predefined color set.
`strokeWidth`	Number	The width of the stroke for the donut chart. Default is `10`.
`onClick`	Function	A callback function that is called when a segment is clicked.

Legend Options

The DonutChart component includes a configurable legend. You can control its visibility and position using the following props:

Prop	Type	Default	Description
`showLegend`	Boolean	`true`	Whether to display the legend.
`legendPosition`	String	`"bottom"`	Position of the legend: `"top"`, `"bottom"`, `"left"`, or `"right"`.

Legend Appearance

The legend is styled with a modern card-like design:

Each legend item has a background color matching the corresponding chart slice.
The label and value are displayed together for better clarity.

Customization

You can customize the appearance of the donut chart by modifying the colors, width, height, and strokeWidth props. Additionally, you can handle click events on the chart segments using the onClick prop.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Package detail