# 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](/pricing/).

## ApexCharts example

`adminkit.apexcharts()` renders the chart and updates it when the [color mode](/bootstrap/docs/getting-started/dark-mode/#charts-and-maps) changes.

```html
<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>
```

---

Canonical HTML page: https://adminkit.io/bootstrap/docs/charts/bubble-chart/

Site overview for agents: https://adminkit.io/llms.txt (expanded: https://adminkit.io/llms-full.txt) · Documentation: https://adminkit.io/bootstrap/docs/ · Questions: support@adminkit.io