# React Radar Chart

A React radar chart with Chart.js that compares two models on five ratings, one polygon each, in theme colors for light and dark mode.

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](/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](/react/docs/charts/overview/) has the details.

## Example

Two car models rated on five axes. AdminKit curves Chart.js lines by default, except on radar charts: their edges stay 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
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.

```tsx title="src/routes/models.tsx"
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>
  );
}
```

## 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>`. Put the chart in a container with a height, such as `.chart` (see [Chart setup](/react/docs/charts/overview/#chartjs)).

## Fill colors

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:

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

## ApexCharts example

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

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

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

## Accessibility

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

## Related

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

---

Canonical HTML page: https://adminkit.io/react/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