Charts
Bootstrap 5 Area Chart
Area charts show how quantities change over time, with the area under each line filled. ApexCharts example for AdminKit PRO, in light and dark mode.
This feature is only available in AdminKit PRO. Learn more.
ApexCharts example
adminkit.apexcharts() renders the chart and updates it when the color mode changes.
<div id="apexcharts-area"></div>
<script>
var options = {
chart: {
height: 350,
type: "area",
},
dataLabels: {
enabled: false
},
stroke: {
curve: "smooth"
},
series: [{
name: "series1",
data: [31, 40, 28, 51, 42, 109, 100]
}, {
name: "series2",
data: [11, 32, 45, 32, 34, 52, 41]
}],
xaxis: {
type: "datetime",
categories: ["2026-09-19T00:00:00", "2026-09-19T01:30:00", "2026-09-19T02:30:00", "2026-09-19T03:30:00", "2026-09-19T04:30:00",
"2026-09-19T05:30:00", "2026-09-19T06:30:00"
],
},
tooltip: {
x: {
format: "dd/MM/yy HH:mm"
},
}
}
adminkit.apexcharts("#apexcharts-area", function () {
return options;
});
</script>Last updated on