# React Bubble Chart

A React bubble chart with ApexCharts in AdminKit PRO: three values per point, x, y and the bubble size, drawn by the ApexChart component.

> This component is only available in **AdminKit PRO**. [Learn more](/pricing/#react).

Reach for a bubble chart when each item has three numbers to show at once. Two of them place the bubble on the x and y axes, and the third sets its size. [AdminKit for React](/react/) draws it with `ApexChart`, its React component for [ApexCharts](https://apexcharts.com/). [Chart setup](/react/docs/charts/overview/#apexcharts) explains how it takes its options.

The example generates random data, as the HTML version does. Generate it outside the `options` function. `ApexChart` calls `options` again each time the color mode changes, so random or computed data inside it would make the bubbles jump to new places when the user switches to dark mode.

## Example

```html
<div id="apexcharts-bubble"></div>

<script>
function random(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function generateData(count) {
  var data = [];
  for (var i = 0; i < count; i++) {
    data.push([random(1, 750), random(10, 60), random(15, 75)]);
  }
  return data;
}

var options = {
  series: ["Bubble1", "Bubble2", "Bubble3", "Bubble4"].map(function (name) {
    return { name: name, data: generateData(20) };
  }),
  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>
```
```tsx code
import { ApexChart } from "@/components/plugins/apexcharts";

const random = (min: number, max: number) =>
  Math.floor(Math.random() * (max - min + 1)) + min;

// [x, y, size]: random once per page load, so a color mode change keeps the bubbles
const series = ["Bubble1", "Bubble2", "Bubble3", "Bubble4"].map((name) => ({
  name,
  data: Array.from({ length: 20 }, () => [
    random(1, 750),
    random(10, 60),
    random(15, 75),
  ]),
}));

export function BubbleChart() {
  return (
    <div className="position-relative" style={{ minHeight: 365 }}>
      <ApexChart
        options={() => ({
          series,
          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 },
        })}
      />
    </div>
  );
}
```

Until ApexCharts has loaded and drawn, a skeleton shows instead. The `position-relative` element keeps the chart's space for it.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `options` | `(theme: Theme) => ApexOptions` | | The ApexCharts options, with `series` and `chart.type`. Called again with the new colors when the color mode changes |

## Data

Each point is `[x, y, z]`. `z` sets the size of the bubble, relative to the other bubbles of the chart. The four series take the primary, success, warning and danger colors of the wrapper. `fill.opacity: 0.8` keeps overlapping bubbles visible.

For your own data, map it to points once, outside `options`:

```tsx
const series = [
  {
    name: "Customers",
    data: accounts.map((account) => [account.age, account.orders, account.revenue]),
  },
];
```

## Accessibility

- Bubble sizes are hard to compare by eye, and the values only show in tooltips on hover. Put the figures that matter in a table next to the chart.
- `ApexChart` passes other props to its `<div>`: give it `role="figure"` and an `aria-label` that says what the chart shows.
- The series names show in the legend, so the colors are not the only key.

## Related

- [Next.js bubble chart](/nextjs/docs/charts/bubble-chart/): the same chart in AdminKit for Next.js
- [Bootstrap 5 bubble chart](/bootstrap/docs/charts/bubble-chart/): the ApexCharts example of the HTML version
- [Chart setup](/react/docs/charts/overview/): the `ApexChart`, `ChartJs` and `VectorMap` components
- [React scatter chart](/react/docs/charts/scatter-chart/): points on two axes, without the size
- [ApexCharts demo](https://react-demo.adminkit.io/charts-apexcharts): the line, area, bar, column, pie, heatmap, mixed and candlestick charts of the demo

---

Canonical HTML page: https://adminkit.io/react/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