Charts
Bootstrap 5 Bubble Chart
Bubble charts show three dimensions of data at once, with x, y and the bubble size. 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-bubble"></div>
<script>
function generateData(baseval, count, yrange) {
var i = 0;
var series = [];
while (i < count) {
var x = Math.floor(Math.random() * (750 - 1 + 1)) + 1;;
var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
var z = Math.floor(Math.random() * (75 - 15 + 1)) + 15;
series.push([x, y, z]);
baseval += 86400000;
i++;
}
return series;
}
var options = {
series: [{
name: 'Bubble1',
data: generateData(new Date('11 Feb 2026 GMT').getTime(), 20, {
min: 10,
max: 60
})
},
{
name: 'Bubble2',
data: generateData(new Date('11 Feb 2026 GMT').getTime(), 20, {
min: 10,
max: 60
})
},
{
name: 'Bubble3',
data: generateData(new Date('11 Feb 2026 GMT').getTime(), 20, {
min: 10,
max: 60
})
},
{
name: 'Bubble4',
data: generateData(new Date('11 Feb 2026 GMT').getTime(), 20, {
min: 10,
max: 60
})
}],
chart: {
height: 350,
type: 'bubble',
},
dataLabels: {
enabled: false
},
fill: {
opacity: 0.8
},
title: {
text: 'Simple Bubble Chart'
},
xaxis: {
tickAmount: 12,
type: 'category',
},
yaxis: {
max: 70
}
};
adminkit.apexcharts("#apexcharts-bubble", function () {
return options;
});
</script>Last updated on