Charts
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 changes.
<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.
adminkit.apexcharts() renders the chart and updates it when the color mode changes.
<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>Last updated on