React Polar Area Chart

A polar area chart compares a few values in a circle, such as the ratings of one product. It looks like a pie chart, but every segment has the same angle and its radius shows the value. In AdminKit for React you draw it with the ChartJs component, in the free and PRO versions. AdminKit PRO also draws it with ApexCharts through ApexChart.

The component takes a function of the theme colors, so the segments follow light and dark mode. See Chart setup.

ExampleCopy Anchor Link

Five ratings of one car model, one theme color per segment.

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

export function RatingsPolarAreaChart() {
  return (
    <div className="chart">
      <ChartJs
        aria-label="Ratings of Model S"
        config={(theme) => ({
          type: "polarArea",
          data: {
            labels: ["Speed", "Reliability", "Comfort", "Safety", "Efficiency"],
            datasets: [
              {
                label: "Model S",
                data: [35, 38, 65, 70, 24],
                backgroundColor: [
                  theme.primary,
                  theme.success,
                  theme.danger,
                  theme.warning,
                  theme.info,
                ],
              },
            ],
          },
          options: { maintainAspectRatio: false },
        })}
      />
    </div>
  );
}

Use it in a page in src/routes/. Pages load when they are opened (React.lazy in src/app.tsx), so Chart.js is only downloaded for pages that draw a chart.

import { RatingsPolarAreaChart } from "@/components/ratings-polar-area-chart";

export default function Page() {
  return (
    <div className="card">
      <div className="card-header">
        <h2 className="card-title">Model S</h2>
      </div>
      <div className="card-body">
        <RatingsPolarAreaChart />
      </div>
    </div>
  );
}

PropsCopy Anchor Link

Other props, such as id and aria-label, go to the <canvas>. The .chart container is 300px high (other heights on Chart setup).

Scale and legendCopy Anchor Link

The example keeps Chart.js' defaults: a legend above the chart and a radial scale with rings and tick labels. The rings and labels take the text and border colors that AdminKit sets for the current mode. To hide the tick labels, set them on the r scale:

options: {
  maintainAspectRatio: false,
  scales: { r: { ticks: { display: false } } },
},

ChartJs imports chart.js/auto, so the polar area controller and its radial scale are registered without extra imports.

ApexCharts exampleCopy Anchor Link

This version shows nine values with ApexChart, at 80% opacity. Below 480px wide, the responsive option shrinks the chart and moves the legend underneath.

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

export function SegmentsPolarAreaChart() {
  return (
    <div className="position-relative" style={{ minHeight: 365 }}>
      <ApexChart
        options={() => ({
          series: [14, 23, 21, 17, 15, 10, 12, 17, 21],
          chart: { height: 350, type: "polarArea" },
          stroke: { colors: ["#fff"] },
          fill: { opacity: 0.8 },
          responsive: [
            {
              breakpoint: 480,
              options: {
                chart: { width: 200 },
                legend: { position: "bottom" },
              },
            },
          ],
        })}
      />
    </div>
  );
}

The example sets white segment borders. Leave stroke.colors out and ApexChart uses the surface color (theme.white) instead, which follows dark mode. Polar area charts are drawn again on a color mode change, without animation.

AccessibilityCopy Anchor Link

• ChartJs renders the <canvas> with role="img". Give it an aria-label and write the values that matter in text, since screen readers do not read the segments.
• Each segment has its own color, and the Chart.js legend names them. Keep it visible, or label the segments in text.
• Under prefers-reduced-motion, the charts draw without the entrance animation.

RelatedCopy Anchor Link

• Next.js polar area chart: the same chart in AdminKit for Next.js
• Bootstrap 5 polar area chart: the polar area chart of the HTML version
• Chart setup: the ChartJs, ApexChart and VectorMap components
• Radar chart: the same ratings for two models
• Chart.js demo