Next.js Radar Chart

Radar charts put several values on the same axes and draw one polygon per series. That makes them a good fit when you compare items on the same criteria, such as two models rated on five axes. In the free and PRO versions of AdminKit for Next.js, the ChartJs component draws them with Chart.js. AdminKit PRO adds ApexChart for ApexCharts.

ChartJs is a client component, because Chart.js draws in the browser. Its config is a function of the theme colors. Your page is a server component, and a server component cannot pass a function to a client component. So write the chart as a "use client" component and render it from your page. Chart setup covers the details.

ExampleCopy Anchor Link

Two models rated on five axes. AdminKit's Chart.js defaults curve lines, but keep the edges of radar charts straight.

"use client";

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

export function ModelsRadarChart() {
  return (
    <div className="chart">
      <ChartJs
        aria-label="Ratings of Model X and Model S"
        config={(theme) => ({
          type: "radar",
          data: {
            labels: ["Speed", "Reliability", "Comfort", "Safety", "Efficiency"],
            datasets: [
              {
                label: "Model X",
                backgroundColor: "rgba(0, 123, 255, 0.2)",
                borderColor: theme.primary,
                pointBackgroundColor: theme.primary,
                pointBorderColor: "#fff",
                pointHoverBackgroundColor: "#fff",
                pointHoverBorderColor: theme.primary,
                data: [70, 53, 82, 60, 33],
              },
              {
                label: "Model S",
                backgroundColor: "rgba(220, 53, 69, 0.2)",
                borderColor: theme.danger,
                pointBackgroundColor: theme.danger,
                pointBorderColor: "#fff",
                pointHoverBackgroundColor: "#fff",
                pointHoverBorderColor: theme.danger,
                data: [35, 38, 65, 85, 84],
              },
            ],
          },
          options: { maintainAspectRatio: false },
        })}
      />
    </div>
  );
}

Render it from the page:

import { ModelsRadarChart } from "@/components/models-radar-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">Compare models</h2>
        </div>
        <div className="card-body">
          <ModelsRadarChart />
        </div>
      </div>
    </>
  );
}

The exported page has a skeleton in the chart's place. The radar draws once the page has hydrated.

PropsCopy Anchor Link

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

Fill colorsCopy Anchor Link

The polygon fills are fixed rgba() colors, so they stay the same in both modes. Chart.js' color helper, which AdminKit's wrapper uses too, derives them from the theme colors:

import { color } from "chart.js/helpers";

// in the datasets of config(theme)
backgroundColor: color(theme.primary).alpha(0.2).rgbString(),

The point borders are #fff. theme.white is the surface color: white in light mode, and the card background in dark mode.

ApexCharts exampleCopy Anchor Link

The ApexCharts version draws one series over six months, one axis per month (xaxis.categories). It is a "use client" file too.

"use client";

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

export function MonthsRadarChart() {
  return (
    <div className="position-relative" style={{ minHeight: 365 }}>
      <ApexChart
        options={() => ({
          series: [{ name: "Series 1", data: [80, 50, 30, 40, 100, 20] }],
          chart: { height: 350, type: "radar" },
          xaxis: {
            categories: ["January", "February", "March", "April", "May", "June"],
          },
        })}
      />
    </div>
  );
}

The series is drawn in the primary color and the labels in the gray text color of the current mode.

AccessibilityCopy Anchor Link

• ChartJs gives its <canvas> role="img". Screen readers do not read the polygons, so add an aria-label and state the ratings that matter in text.
• The models differ by color, and the Chart.js legend names them. Keep it visible, or name them in the card text.
• Under prefers-reduced-motion, the charts draw without the entrance animation.

RelatedCopy Anchor Link

• React radar chart: the same chart in AdminKit for React (Vite)
• Bootstrap 5 radar chart: the radar chart of the HTML version
• Chart setup: the ChartJs, ApexChart and VectorMap components
• Polar area chart: the same ratings as segments
• Chart.js demo