# Bootstrap 5 Radar Chart

Radar charts compare several values on the same set of axes, with one polygon per data series. Chart.js and ApexCharts examples.

## Chart.js example

`adminkit.chartjs()` creates the Chart.js chart from a function of the theme colors and calls it again when the [color mode](/docs/getting-started/dark-mode/#charts-and-maps) changes.

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

## ApexCharts example

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

`adminkit.apexcharts()` renders the chart and updates it when the [color mode](/docs/getting-started/dark-mode/#charts-and-maps) changes.

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

---

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

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