Next.js Polar Area Chart

Use a polar area chart to compare a few scores, such as five ratings of one model. Every segment has the same angle, and its radius shows the value. AdminKit for Next.js draws it with the ChartJs component, in the free and PRO versions. AdminKit PRO also has ApexChart for ApexCharts.

ChartJs is a client component, and its config function reads the theme colors. Your page is a server component, and a server component cannot hand a function to a client component. So put the chart in a "use client" component and render that from your page. Chart setup explains the components.

ExampleCopy Anchor Link

Five ratings of one model, each segment in a theme color.

"use client";

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

The page stays a server component:

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

export const metadata = pageMetadata("/models");

export default function ModelsPage() {
  return (
    <>
      <h1 className="h3 mb-3">Models</h1>
      <div className="card">
        <div className="card-header">
          <h2 className="card-title">Model S</h2>
        </div>
        <div className="card-body">
          <RatingsPolarAreaChart />
        </div>
      </div>
    </>
  );
}

The static HTML has no chart yet, only a skeleton in the .chart box. The segments draw once the page has hydrated.

PropsCopy Anchor Link

Other props, such as id and aria-label, go to the <canvas>. .chart gives the container its 300px height. Chart setup lists the other heights.

Scale and legendCopy Anchor Link

With Chart.js' defaults, the chart has a legend on top and a radial scale with rings and tick labels, drawn in the text and border colors 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, which registers the polar area controller and the radial scale.

ApexCharts exampleCopy Anchor Link

The ApexCharts version shows nine values at 80% opacity. On screens narrower than 480px, the responsive option makes the chart smaller and puts the legend below it. Like the Chart.js file, this one starts with "use client".

"use client";

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 segment borders are white here. Without stroke.colors, ApexChart draws them in the surface color (theme.white), which follows dark mode. A color mode change draws polar area charts again, without animation.

AccessibilityCopy Anchor Link

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

RelatedCopy Anchor Link

• React polar area chart: the same chart in AdminKit for React (Vite)
• 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