React Doughnut Chart

A doughnut chart is a pie chart with an empty center. Use it for one total split into a few parts, such as visits per traffic source. AdminKit for React draws it with the ChartJs component in the free and PRO versions. In AdminKit PRO, ApexChart can also draw it with ApexCharts.

Pass the configuration as a function of the theme colors, and the ring follows light and dark mode. Chart setup explains the components.

ExampleCopy Anchor Link

The same traffic sources as the pie chart, with a cutout of 65%.

import { ChartJs } from "@/components/plugins/chartjs";

export function TrafficDoughnutChart() {
  return (
    <div className="chart">
      <ChartJs
        aria-label="Visits per traffic source"
        config={(theme) => ({
          type: "doughnut",
          data: {
            labels: ["Social", "Search Engines", "Direct", "Other"],
            datasets: [
              {
                data: [260, 125, 54, 146],
                backgroundColor: [theme.primary, theme.success, theme.warning, "#dee2e6"],
                borderColor: "transparent",
              },
            ],
          },
          options: {
            maintainAspectRatio: false,
            cutout: "65%",
            plugins: { legend: { display: false } },
          },
        })}
      />
    </div>
  );
}

Render the component from a page in src/routes/. Each page loads when it is opened (React.lazy in src/app.tsx), and Chart.js comes with the first one that draws a chart.

import { TrafficDoughnutChart } from "@/components/traffic-doughnut-chart";

export default function Page() {
  return (
    <div className="card">
      <div className="card-header">
        <h2 className="card-title">Traffic sources</h2>
      </div>
      <div className="card-body">
        <TrafficDoughnutChart />
      </div>
    </div>
  );
}

PropsCopy Anchor Link

Other props, such as id and aria-label, go to the <canvas>. The demo uses .chart.chart-sm, 250px high, for its doughnut chart. The other heights are on Chart setup.

Cutout and colorsCopy Anchor Link

cutout sets the size of the hole, as a percentage of the radius or in pixels. A larger value gives a thinner ring:

options: {
  maintainAspectRatio: false,
  cutout: "80%",
},

The "Other" slice keeps the fixed #dee2e6 of the HTML example. For a gray that follows dark mode, use theme["gray-300"], which is the same gray in light mode.

ApexCharts exampleCopy Anchor Link

In ApexCharts the chart type is "donut", and the series is a plain array of numbers, one per slice.

import { ApexChart } from "@/components/plugins/apexcharts";

export function SourcesDonutChart() {
  return (
    <div className="position-relative" style={{ minHeight: 365 }}>
      <ApexChart
        options={() => ({
          chart: { height: 350, type: "donut" },
          dataLabels: { enabled: false },
          series: [44, 55, 13, 33],
        })}
      />
    </div>
  );
}

The slices take the primary, success, warning and danger colors, and their borders the surface color (theme.white). When the color mode changes, ApexChart draws a donut chart again, without animation, so the borders and legend take the new colors.

AccessibilityCopy Anchor Link

• The <canvas> of ChartJs has role="img". Give it an aria-label, and state the shares in text, since screen readers do not read the slices.
• The legend is hidden in the Chart.js example, so the sources differ only by color. Turn the legend on or name them next to the chart.
• Under prefers-reduced-motion, the charts draw without the entrance animation.

RelatedCopy Anchor Link

• Next.js doughnut chart: the same chart in AdminKit for Next.js
• Bootstrap 5 doughnut chart: the doughnut chart of the HTML version
• Chart setup: the ChartJs, ApexChart and VectorMap components
• Pie chart: the same data without the hole
• Chart.js demo