React Pie Chart

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 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 covers both components.

ExampleCopy Anchor Link

Visits per traffic source, with one color per slice.

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.

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>
  );
}

PropsCopy Anchor Link

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.

Legend and slice colorsCopy Anchor Link

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

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 exampleCopy Anchor Link

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.

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.

AccessibilityCopy Anchor Link

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

RelatedCopy Anchor Link

• Next.js pie chart: the same chart in AdminKit for Next.js
• Bootstrap 5 pie chart: the pie chart of the HTML version
• Chart setup: the ChartJs, ApexChart and VectorMap components
• Doughnut chart: a pie chart with an empty center
• Chart.js demo and ApexCharts demo