Bubble Chart
ProX/Y scatter with a third dimension carried by the bubble size. Multi-series, animated scale-in entrance, hover and keyboard selection. Pure SVG.
import { SvBubbleChartComponent } from '@styloviz-pro/charts';Demo & usage
Basic usage
ProUsage example — open the gallery for the full interactive demo.
An interactive demo for this component lives in the gallery.
Open live demoMore examples
Titled with a fixed height
ProListen for selections
ProWhen to use
- Three numeric variables at once, where the third is a magnitude rather than a category.
- Spotting outliers in two dimensions while keeping a sense of weight.
- For two variables, a scatter plot is more precise — a bubble adds an encoding the reader has to decode.
Async states
- loading
- empty
- error
- retry
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| loading | boolean | false | True while the series are being fetched. |
| error | SvDataError | string | null | null | Load failure. Use `toSvDataError()` from `@styloviz/core` to normalize an `HttpErrorResponse`. |
| emptyMessage | string | 'No data to plot' | Copy for the empty state. |
| filtered | boolean | false | Whether a filter, not an absence of data, is why the chart is empty. |
| series | BubbleSeries[] | [] | Bubble series: each point carries x, y and a size value. |
| title | string | '' | Chart title. |
| height | number | 360 | Chart height in pixels. |
| options | BubbleChartOptions | {} | Advanced chart options (axes, legend, colors…). |
| customClass | string | '' | Extra CSS classes for the root element. |
Outputs
| Event | Payload type | Description |
|---|---|---|
| retry | void | The host should re-run the failed load. |
| pointHover | BubblePointEvent | Emitted when a bubble is hovered or keyboard-focused. |
| pointSelect | BubblePointEvent | Emitted when a bubble is clicked or activated via keyboard (Enter/Space). |
Wire it to your API
This component is headless about transport: it renders what you give it and reports what the user asks for. Nothing below requires @styloviz/data — drive it from whatever you already use.
Template
ProBound to the names this component actually exposes.
Host class
ProDrive the three async inputs from your own fetch.
- This component does not emit a query, so it renders what you give it. Fetch on your own trigger and bind `series`, `loading` and `error`.
- Set `filtered` when a search or filter is active. It is the difference between "you have no orders" and "no orders match this filter" — telling a customer with 4,000 orders the first one reads as a bug.
- Normalize failures with `toSvDataError()` from `@styloviz/core`. It derives `retryable` from the status, so a 404 does not get a "Try again" button that can only fail again.
Full walkthrough: Connecting to a backend.
Customization & theming
- Per-series colour and per-point size.
- Configurable plot height.
- Animated scale-in entrance, one bubble at a time.
Best practices
- Do: Say what the bubble size means, in the legend or the title. It is the one channel with no axis to read it against.
- Don't: Do not encode a difference the reader has to judge precisely as area. Area is the least precise encoding on the chart, and two bubbles a third apart look much closer than that.
- Tip: Keep the series count low. Overlapping translucent circles in four colours stop being separable long before the data runs out.
Accessibility
- Every bubble is a keyboard-focusable `role="button"` with an `aria-label` naming its series and all three of its values, so the size dimension is readable rather than only visible.
- Hover and focus show the same tooltip, and Enter/Space emits `pointSelect`.
Feedback on Bubble Chart
Spotted a gap in this page, or something that didn't work as described? Comments are GitHub Discussions in the public styloviz/community repo, so posting needs a GitHub account.