# React Doughnut Chart

A React doughnut chart with Chart.js: a pie chart with an empty center, its slices colored from the theme in light and dark mode.

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](/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](/react/docs/charts/overview/) explains the components.

## Example

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

```html
<div class="chart">
  <canvas id="chartjs-doughnut"></canvas>
</div>

<script>
adminkit.chartjs("#chartjs-doughnut", function (theme) {
  return {
    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
        }
      }
    }
  };
});
</script>
```
```tsx code
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.

```tsx title="src/routes/traffic.tsx"
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>
  );
}
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `config` | `(theme: Theme) => ChartConfiguration` | | The Chart.js configuration. Called again with the new colors when the color mode changes |

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](/react/docs/charts/overview/#chartjs).

## Cutout and colors

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

```tsx
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 example

> This example is only available in **AdminKit PRO**. [Learn more](/pricing/#react).

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

```html
<div id="apexcharts-doughnut"></div>

<script>
var options = {
  chart: {
    height: 350,
    type: "donut",
  },
  dataLabels: {
    enabled: false
  },
  series: [44, 55, 13, 33]
}
adminkit.apexcharts("#apexcharts-doughnut", function () {
  return options;
});
</script>
```
```tsx code
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.

## Accessibility

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

## Related

- [Next.js doughnut chart](/nextjs/docs/charts/doughnut-chart/): the same chart in AdminKit for Next.js
- [Bootstrap 5 doughnut chart](/bootstrap/docs/charts/doughnut-chart/): the doughnut chart of the HTML version
- [Chart setup](/react/docs/charts/overview/): the `ChartJs`, `ApexChart` and `VectorMap` components
- [Pie chart](/react/docs/charts/pie-chart/): the same data without the hole
- [Chart.js demo](https://react-demo.adminkit.io/charts-chartjs)

---

Canonical HTML page: https://adminkit.io/react/docs/charts/doughnut-chart/

Site overview for agents: https://adminkit.io/llms.txt (expanded: https://adminkit.io/llms-full.txt) · Documentation: https://adminkit.io/bootstrap/docs/ · Questions: support@adminkit.io