BubbleChart
Bubble chart mapping x, y, and size dimensions; radius is area-proportional via sqrt scale.
Category: chart · WCAG 2.1-AA · chart, bubble, scatter, three-dimensional, data-viz
Props
| Prop | Type | Default | Description |
|---|---|---|---|
series | { name: string; data: { x: number; y: number; size: number }[] }[] | — | The data series to plot. |
title | string | — | Title text for the component. |
description | string | — | Supporting description text. |
width | number | — | Fixed SVG width in px. ⚠ **Omit for a responsive chart** — the chart fills and tracks its container via a ResizeObserver; there is no correct pixel number in a responsive grid. A fixed width is clamped to the container (max-inline-size: 100%) so it can never overflow its card, but it also stops the chart growing. `useChartSize` is NOT needed for this — charts call it internally. |
height | number | 320 | SVG height in px. Unlike `width`, height does NOT track the container — this is the knob you set to change the chart's aspect. |
tooltip | boolean | — | Enable hover/keyboard tooltip |
className | string | — | Additional CSS class names merged onto the root element. |
plain | boolean | false | Marks only — no axes, grid lines, or legend. For micro/inline charts. |
glyph | GlyphShape | ((d, seriesId) => GlyphShape) | — | Point glyph shape (circle/square/diamond/triangle/cross/star) — a fixed shape or a function to encode a category by shape. |
Design tokens
--cascivo-chart-1--cascivo-chart-2--cascivo-chart-3--cascivo-chart-4--cascivo-chart-5--cascivo-chart-6--cascivo-chart-7--cascivo-chart-8
When to use
- Plotting three dimensions at once — x, y, and a size-encoded magnitude
- Comparing entities where relative scale matters alongside position
When not to use
- Showing only a 2D correlation — use ScatterChart
- Comparing many small magnitudes where size differences are unreadable
Examples
Basic bubble chart
import { BubbleChart } from '@cascivo/charts'
const series = [{ name: 'Group A', data: [{x:1,y:2,size:10},{x:3,y:4,size:30}] }]
<BubbleChart series={series} title="Bubble" />Related components
- ScatterChart — Use when there is no third size dimension to encode