React Radar Chart

A radar chart compares several values on the same set of axes, with one polygon per data series. Use it to set items side by side on the same criteria, such as two products rated on speed, comfort and safety. AdminKit for React draws it with the ChartJs component in the free and PRO versions. AdminKit PRO adds an ApexCharts version with ApexChart.

Both components take a function of the theme colors, so the polygons follow light and dark mode. Chart setup has the details.

ExampleCopy Anchor Link

Two car models rated on five axes. AdminKit curves Chart.js lines by default, except on radar charts: their edges stay straight.

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 a page in src/routes/. Pages load when they are opened (React.lazy in src/app.tsx), so Chart.js only downloads with pages that draw a chart.

import { ModelsRadarChart } from "@/components/models-radar-chart";

export default function Page() {
  return (
    <div className="card">
      <div className="card-header">
        <h2 className="card-title">Compare models</h2>
      </div>
      <div className="card-body">
        <ModelsRadarChart />
      </div>
    </div>
  );
}

PropsCopy Anchor Link

Other props, such as id and aria-label, go to the <canvas>. Put the chart in a container with a height, such as .chart (see Chart setup).

Fill colorsCopy Anchor Link

The fills are fixed rgba() colors in the example, so they do not change with the theme. To derive them from the theme colors, use Chart.js' color helper, as AdminKit's wrapper does:

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 in the example. theme.white is the surface color: white in light mode, and it follows dark mode.

ApexCharts exampleCopy Anchor Link

This ApexCharts version draws one series over six months. Each month is an axis, set with xaxis.categories.

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 takes the primary color, and the labels the gray text color of the current mode.

AccessibilityCopy Anchor Link

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

RelatedCopy Anchor Link

• Next.js radar chart: the same chart in AdminKit for Next.js
• 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