Charts

Bubble charts for three-way comparisons

Plot numeric X and Y with bubbles sized by a third metric. BubbleChart expects numeric `xKey` and uses each series `dataKey` for the vertical measure plus optional `zKey` for radius.

Appearance: glass | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Stroke: #ff0000 | Fill: #000000 | Label Color: white

Examples

Compare framing, density, legend, and stacking with the code tab.


Appearance: outline | Density: compact | Show Grid: true | Show Legend: true | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: muted | Density: spacious | Show Grid: false | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: muted | Density: spacious | Show Grid: false | Show Legend: false | Show Tooltip: true | Stacked: false | Stroke Dasharray: 5,5 | Outer Radius: 100% | Label Color: white

Chart frame variants

Each row pairs live output with JSX; the Variant line states the appearance token on the frame.


Appearance: default | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: muted | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: outline | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: glass | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: sky | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: emerald | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: violet | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: amber | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: rose | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: slate | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: gray | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: indigo | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: gradient-cyan-violet | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: gradient-emerald-violet | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: gradient-amber-rose | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: gradient-slate-gray | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: gradient-indigo-purple | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: gradient-cyan-blue | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: gradient-emerald-blue | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: gradient-amber-blue | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white


Appearance: default | Density: comfortable | Show Grid: false | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

What it does

Combines scatter points with a sized Z channel.

Decorators for grid, tooltip, and legend match other charts.

Data shape

Each row includes numeric `xKey`, numeric fields for vertical positions per series, and optional size fields referenced by `zKey`.

Common use cases

  • Campaign cost versus conversions with spend as bubble size.
  • Risk versus return with liquidity as radius.
  • Feature adoption scatter with active users as size.

Accessibility

Size differences can be hard to judge; pair tooltips with exact values.

Avoid relying on color alone when more than a few bubbles overlap.

Next.js integration notes

Import from `@zentauri-ui/zentauri-components/charts/bubble` inside client components when interaction is required.

FAQ

What if I omit zKey?

Bubbles still render with default sizing from the ZAxis range; add `zKey` on the series when the third metric should drive radius.

Are axes always numeric?

Bubble charts use continuous axes suitable for scatter data; map categorical encodings to numbers before plotting.