Charts
Bootstrap 5 Polar Area Chart
Polar area charts are similar to pie charts, but each segment has the same angle.
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-polar-area"></canvas>
</div>
<script>
adminkit.chartjs("#chartjs-polar-area", function (theme) {
return {
type: "polarArea",
data: {
labels: ["Speed", "Reliability", "Comfort", "Safety", "Efficiency"],
datasets: [{
label: "Model S",
data: [35, 38, 65, 70, 24],
backgroundColor: [
theme.primary,
theme.success,
theme.danger,
theme.warning,
theme.info
]
}]
},
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-polar-area"></div>
<script>
var options = {
series: [14, 23, 21, 17, 15, 10, 12, 17, 21],
chart: {
height: 350,
type: 'polarArea',
},
stroke: {
colors: ['#fff']
},
fill: {
opacity: 0.8
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom'
}
}
}]
};
adminkit.apexcharts("#apexcharts-polar-area", function () {
return options;
});
</script>Last updated on