# Next.js Radar Chart

A Next.js radar chart: a Chart.js client component that compares two models on five axes, rendered from a server component page.

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](/nextjs/), 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](/nextjs/docs/charts/overview/) covers the details.

## Example

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

```html
<div class="chart">
  <canvas id="chartjs-radar"></canvas>
</div>

<script>
adminkit.chartjs("#chartjs-radar", function (theme) {
  return {
    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
    }
  };
});
</script>
```
```tsx code title="src/components/models-radar-chart.tsx"
"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:

```tsx title="src/app/(dashboard)/models/page.tsx"
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.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `config` | `(theme: Theme) => ChartConfiguration` | | The Chart.js configuration. Called again with the new colors when the color mode changes |

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](/nextjs/docs/charts/overview/#chartjs).

## Fill colors

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:

```tsx
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 example

> This example is only available in **AdminKit PRO**. [Learn more](/pricing/#nextjs).

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

```html
<div id="apexcharts-radar"></div>

<script>
var 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']
  }
};

adminkit.apexcharts("#apexcharts-radar", function () {
  return options;
});
</script>
```
```tsx code title="src/components/months-radar-chart.tsx"
"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.

## Accessibility

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

## Related

- [React radar chart](/react/docs/charts/radar-chart/): the same chart in AdminKit for React (Vite)
- [Bootstrap 5 radar chart](/bootstrap/docs/charts/radar-chart/): the radar chart of the HTML version
- [Chart setup](/nextjs/docs/charts/overview/): the `ChartJs`, `ApexChart` and `VectorMap` components
- [Polar area chart](/nextjs/docs/charts/polar-area-chart/): the same ratings as segments
- [Chart.js demo](https://nextjs-demo.adminkit.io/charts-chartjs)

---

Canonical HTML page: https://adminkit.io/nextjs/docs/charts/radar-chart/

Site overview for agents: https://adminkit.io/llms.txt (expanded: https://adminkit.io/llms-full.txt) · Documentation: https://adminkit.io/bootstrap/docs/ · Questions: support@adminkit.io