BubbleChart

A scattergram where the marker area encodes a third measure. Area, not radius, is proportional to size, so the visual weight matches the number.

When to use

Portfolio / positioning - market attractiveness vs share with revenue as bubble size. Up to ~100 bubbles.

Example

import { BubbleChart } from "ibcs-react";

<BubbleChart
  data={[{ x: 12, y: 4.5, size: 320, group: "EU", label: "DE" } /* … */]}
  xLabel="Growth %"
  yLabel="Margin %"
  sizeLabel="Revenue"
/>;

Name the units in the axis and size labels - a bubble chart without them is unreadable. Beyond roughly a hundred bubbles the overlap wins; drop the size dimension and use ScatterChart instead.

Props