Charts
Bootstrap 5 Heatmap Chart
Heatmap charts represent data with color, the way a bar chart uses height and width.
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-heatmap"></div>
<script>
function generateData(count, yrange) {
var i = 0;
var series = [];
while (i < count) {
var x = (i + 1).toString();
var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
series.push({
x: x,
y: y
});
i++;
}
return series;
}
var options = {
chart: {
height: 350,
type: "heatmap",
},
dataLabels: {
enabled: false
},
colors: ["#008FFB"],
series: [{
name: "Metric1",
data: generateData(20, {
min: 0,
max: 90
})
},
{
name: "Metric2",
data: generateData(20, {
min: 0,
max: 90
})
},
{
name: "Metric3",
data: generateData(20, {
min: 0,
max: 90
})
},
{
name: "Metric4",
data: generateData(20, {
min: 0,
max: 90
})
},
{
name: "Metric5",
data: generateData(20, {
min: 0,
max: 90
})
},
{
name: "Metric6",
data: generateData(20, {
min: 0,
max: 90
})
},
{
name: "Metric7",
data: generateData(20, {
min: 0,
max: 90
})
},
{
name: "Metric8",
data: generateData(20, {
min: 0,
max: 90
})
},
{
name: "Metric9",
data: generateData(20, {
min: 0,
max: 90
})
}
],
xaxis: {
type: "category",
}
}
adminkit.apexcharts("#apexcharts-heatmap", function () {
return options;
});
</script>Last updated on
Column chartPro
Column charts use vertical bars to compare values across categories. ApexCharts example for AdminKit PRO, in light and dark mode.
Mixed chartPro
Mixed charts combine two or more chart types, such as columns and a line, in one chart. ApexCharts example for AdminKit PRO, in light and dark mode.