React Bubble Chart

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 draws it with ApexChart, its React component for ApexCharts. Chart setup 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.

ExampleCopy Anchor Link

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.

PropsCopy Anchor Link

DataCopy Anchor Link

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:

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

AccessibilityCopy Anchor Link

• 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.

RelatedCopy Anchor Link

• Next.js bubble chart: the same chart in AdminKit for Next.js
• Bootstrap 5 bubble chart: the ApexCharts example of the HTML version
• Chart setup: the ApexChart, ChartJs and VectorMap components
• React scatter chart: points on two axes, without the size
• ApexCharts demo: the line, area, bar, column, pie, heatmap, mixed and candlestick charts of the demo