Charts
Bootstrap 5 Timeline Chart
Timeline charts show a series of events or tasks as bars on a time axis. 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-timeline"></div>
<script>
var options = {
series: [
{
data: [
{
x: 'Code',
y: [
new Date('2026-03-02').getTime(),
new Date('2026-03-04').getTime()
]
},
{
x: 'Test',
y: [
new Date('2026-03-04').getTime(),
new Date('2026-03-08').getTime()
]
},
{
x: 'Validation',
y: [
new Date('2026-03-08').getTime(),
new Date('2026-03-12').getTime()
]
},
{
x: 'Deployment',
y: [
new Date('2026-03-12').getTime(),
new Date('2026-03-18').getTime()
]
}
]
}
],
chart: {
height: 350,
type: 'rangeBar'
},
plotOptions: {
bar: {
horizontal: true
}
},
xaxis: {
type: 'datetime'
}
};
adminkit.apexcharts("#apexcharts-timeline", function () {
return options;
});
</script>Last updated on
Scatter chartPro
Scatter charts plot data points on two numeric axes to show how two values relate. ApexCharts example for AdminKit PRO, in light and dark mode.
Treemap chartPro
Treemap charts show hierarchically organized data as nested rectangles, each parent element tiled with its child elements. ApexCharts example.