Charts
Bootstrap 5 Doughnut Chart
Doughnut charts show parts of a whole as percentages and ratios, with an empty center. Chart.js and ApexCharts examples that follow light and dark mode.
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-doughnut"></canvas>
</div>
<script>
adminkit.chartjs("#chartjs-doughnut", function (theme) {
return {
type: "doughnut",
data: {
labels: ["Social", "Search Engines", "Direct", "Other"],
datasets: [{
data: [260, 125, 54, 146],
backgroundColor: [
theme.primary,
theme.success,
theme.warning,
"#dee2e6"
],
borderColor: "transparent"
}]
},
options: {
maintainAspectRatio: false,
cutout: "65%",
plugins: {
legend: {
display: 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-doughnut"></div>
<script>
var options = {
chart: {
height: 350,
type: "donut",
},
dataLabels: {
enabled: false
},
series: [44, 55, 13, 33]
}
adminkit.apexcharts("#apexcharts-doughnut", function () {
return options;
});
</script>Last updated on