# React Pie Chart

A React pie chart with Chart.js that splits traffic sources into slices, in theme colors that switch with light and dark mode.

A pie chart shows the parts of a whole, such as where your visitors come from. It reads best with a handful of slices. In [AdminKit for React](/react/) it is a Chart.js chart, drawn with the `ChartJs` component in the free and PRO versions. AdminKit PRO can also draw it with ApexCharts through `ApexChart`.

The chart's configuration is a function of the theme colors, so the slices follow light and dark mode. [Chart setup](/react/docs/charts/overview/) covers both components.

## Example

Visits per traffic source, with one color per slice.

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

<script>
adminkit.chartjs("#chartjs-pie", function (theme) {
  return {
    type: "pie",
    data: {
      labels: ["Social", "Search Engines", "Direct", "Other"],
      datasets: [{
        data: [260, 125, 54, 146],
        backgroundColor: [
          theme.primary,
          theme.warning,
          theme.danger,
          "#dee2e6"
        ],
        borderColor: "transparent"
      }]
    },
    options: {
      maintainAspectRatio: false,
      plugins: {
        legend: {
          display: false
        }
      }
    }
  };
});
</script>
```
```tsx code
import { ChartJs } from "@/components/plugins/chartjs";

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

Render it from a route in `src/routes/`. Routes load only when someone opens them (`React.lazy` in `src/app.tsx`), so pages without a chart do not download Chart.js.

```tsx title="src/routes/traffic.tsx"
import { TrafficPieChart } from "@/components/traffic-pie-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">
        <TrafficPieChart />
      </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 puts its pie chart in `.chart.chart-sm`, 250px high instead of 300px. The other heights are on [Chart setup](/react/docs/charts/overview/#chartjs).

## Legend and slice colors

The example hides the legend. To show it, set `legend.display` to `true`. `legend.position` moves it, for example to `"bottom"`:

```tsx
plugins: { legend: { display: true, position: "bottom" } },
```

The "Other" slice keeps the fixed `#dee2e6` of the HTML example. `theme["gray-300"]` is the same gray in light mode and follows the gray scale of dark mode.

## ApexCharts example

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

For a pie chart, ApexCharts takes the series as a plain array of numbers, one per slice. Without `labels`, the legend names the slices "series-1" to "series-4". Set `labels` to name them.

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

<script>
var options = {
  chart: {
    height: 350,
    type: "pie",
  },
  dataLabels: {
    enabled: false
  },
  series: [44, 55, 13, 33]
}
adminkit.apexcharts("#apexcharts-pie", function () {
  return options;
});
</script>
```
```tsx code
import { ApexChart } from "@/components/plugins/apexcharts";

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

For pie, donut and polar area charts, `ApexChart` gives the slice borders the surface color (`theme.white`) unless the options set `stroke.colors`. On a color mode change it draws these charts again, without the entrance animation, so the borders, labels and legend take the new colors.

## Accessibility

- `ChartJs` renders the `<canvas>` with `role="img"`. Give it an `aria-label`. Screen readers do not read the slices, so put the shares that matter in text, such as a table or a list next to the chart.
- Without a legend, the slices differ only by color. Show the legend or label the sources in text.
- Under `prefers-reduced-motion`, the charts draw without the entrance animation.

## Related

- [Next.js pie chart](/nextjs/docs/charts/pie-chart/): the same chart in AdminKit for Next.js
- [Bootstrap 5 pie chart](/bootstrap/docs/charts/pie-chart/): the pie chart of the HTML version
- [Chart setup](/react/docs/charts/overview/): the `ChartJs`, `ApexChart` and `VectorMap` components
- [Doughnut chart](/react/docs/charts/doughnut-chart/): a pie chart with an empty center
- [Chart.js demo](https://react-demo.adminkit.io/charts-chartjs) and [ApexCharts demo](https://react-demo.adminkit.io/charts-apexcharts)

---

Canonical HTML page: https://adminkit.io/react/docs/charts/pie-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