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.

Table of Contents

• 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.