Charts
Bootstrap 5 Treemap Chart
Treemap charts show hierarchically organized data as nested rectangles, each parent element tiled with its child elements. ApexCharts example.
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-treemap"></div>
<script>
var options = {
series: [
{
data: [
{
x: 'New Delhi',
y: 218
},
{
x: 'Kolkata',
y: 149
},
{
x: 'Mumbai',
y: 184
},
{
x: 'Ahmedabad',
y: 55
},
{
x: 'Bengaluru',
y: 84
},
{
x: 'Pune',
y: 31
},
{
x: 'Chennai',
y: 70
},
{
x: 'Jaipur',
y: 30
},
{
x: 'Surat',
y: 44
},
{
x: 'Hyderabad',
y: 68
},
{
x: 'Lucknow',
y: 28
},
{
x: 'Indore',
y: 19
},
{
x: 'Kanpur',
y: 29
}
]
}
],
legend: {
show: false
},
chart: {
height: 350,
type: 'treemap'
},
title: {
text: 'Basic Treemap'
}
};
adminkit.apexcharts("#apexcharts-treemap", function () {
return options;
});
</script>Last updated on
Timeline chartPro
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.
Lucide Icons
AdminKit renders Lucide icons from data-lucide attributes. Bundled icons, sizes, colors, adding icons and rendering icons inserted at runtime.