Creating a Simple Donut Chart in React with ECharts

Visualizing data is key to engaging users, and a donut chart is a great way to showcase information. In this quick guide, I’ll show you how to create a donut chart in React using ECharts, perfect for adding dynamic charts to your app.

First, install the required packages:

npm install echarts react echarts-for-react

Now, let’s build the Donut Chart component:

import * as echarts from "echarts/core";
import {
  TitleComponent,
  TitleComponentOption,
  TooltipComponent,
  TooltipComponentOption,
  LegendComponent,
  LegendComponentOption,
} from "echarts/components";
import { PieChart, PieSeriesOption } from "echarts/charts";
import { LabelLayout } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
import { useEffect, useRef } from "react";

echarts.use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout,
]);

type EChartsOption = echarts.ComposeOption<
  | TitleComponentOption
  | TooltipComponentOption
  | LegendComponentOption
  | PieSeriesOption
>;

interface DonutChartProps {
  data: { state: string; count: number }[];
  colors?: string[]; // Customizable color palette
  height?: number; // Customizable chart height
  width?: string; // Customizable chart width
}

const DonutChart: React.FC<DonutChartProps> = ({
  data,
  colors = [
    "#FF6B6B", "#FFD93D", "#6BCB77", "#4D96FF", "#9A97F7",
    "#FF928B", "#FFC971", "#91C788", "#7BDFF2", "#B5EAEA"
  ], // New appealing color palette
  height = 400, // Default height
  width = "100%" // Default width
}) => {
  const chartRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (chartRef.current) {
      const chartInstance = echarts.init(chartRef.current);

      const option: EChartsOption = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "right",
          itemWidth: 14,
          itemHeight: 14,
          textStyle: {
            fontSize: 14,
          },
        },
        series: [
          {
            name: "Sales Data",
            type: "pie",
            radius: ["40%", "70%"], // Inner and outer radius for donut shape
            data: data.map((item, index) => ({
              value: item.count,
              name: item.state,
              itemStyle: {
                color: colors[index % colors.length], // Use custom colors or default palette
              },
            })),
            label: {
              fontSize: 13,
              formatter: "{b}",
            },
            labelLine: {
              length: 20,
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      chartInstance.setOption(option);

      const resizeChart = () => {
        chartInstance.resize();
      };
      window.addEventListener("resize", resizeChart);

      return () => {
        window.removeEventListener("resize", resizeChart);
        chartInstance.dispose();
      };
    }
  }, [data, colors]);

  return <div ref={chartRef} style={{ width, height: `${height}px` }} />;
};

export default DonutChart;

You can use the following mock data to visualize the chart:-

const mockData = [
  { state: "New York", count: 120 },
  { state: "California", count: 200 },
  { state: "Texas", count: 90 },
  { state: "Florida", count: 150 },
  { state: "Nevada", count: 80 },
];

// In your component render:
<DonutChart data={mockData} />

By following these steps, you’ve created a flexible and interactive donut chart using ECharts in React. It’s easy to customize for different datasets and color schemes, making it perfect for presenting data like sales or project stats. For more customization options, check out the official ECharts documentation!

Thank you for following along with this guide to create a customizable donut chart using ECharts in React. We hope this tutorial helps you easily integrate data visualization into your projects. If you found this helpful, feel free to explore my other articles for more tips and tutorials on React, ECharts, and web development. Happy coding!