Scatter and bubble charts: the relation between two numbers, with an optional third value as bubble size.
Introduction
ChartScatter plots points on two numeric axes, with an optional third value as bubble size. Compose it with ChartScatterSeries, ChartAxis, ChartLegend, and ChartTooltip. Shared parts, colors, and accessibility are in Chart.
When to use: Correlation between two numbers — age and ticket, price and rating — or three values per item as bubbles.
Compared to similar components:
- ChartLine — One value per category over an ordered set.
Use the framework selector in the site header to switch between React and Vue.
Import
import { ChartScatter } from "@bridge-ui/vue/Components/ChartScatter";
import { ChartScatterSeries } from "@bridge-ui/vue/Components/ChartScatterSeries";import { ChartScatter } from "@bridge-ui/react/Components/ChartScatter";
import { ChartScatterSeries } from "@bridge-ui/react/Components/ChartScatterSeries";Add ChartAxis, ChartLegend, and ChartTooltip from Chart.
Basic usage
Each ChartScatterSeries takes [x, y] points. Add a series per group. The tooltip shows the series name and each value, labelled with the axis titles. symbolSize sets the point diameter (default 8).
Bubbles
A third value per point sets the bubble size. bubbleSize maps the smallest and largest values (across all series) to a diameter range, scaled by area: a value twice as big covers twice the area. sizeName labels the third value in the tooltip and data table.
Color by range
colorRanges recolors single points by their y. A y in [min, max) takes the range color; other points keep the series color. Range labels show in the tooltip and the data table.
Keyboard and accessibility
Arrow keys move through the points ordered by x, then y. Each point is announced with its series and values. The root generates a summary with the series names and the point count. See Chart for the shared behavior.
Related components
API
ChartScatter
Shared root props (height, palette, loading, summary, …) are listed in Chart.
| Prop | Type | Default | Description |
|---|---|---|---|
| bubbleSize | [number, number] | [8, 40] | Min and max bubble diameter (px) for [x, y, size] points. Vue: bubble-size. |
| symbolSize | number | 8 | Point diameter (px) for [x, y] points. Vue: symbol-size. |
ChartScatterSeries
| Prop | Type | Default | Description |
|---|---|---|---|
| color | ChartColorValue | palette | Token key or any CSS color. |
| colorRanges | ChartColorRangeOption[] | — | { min?, max?, color, label? }: points with y in [min, max) take color. Vue: color-ranges. |
| data | [number, number][] | [number, number, number][] | — | Required. Points; the third value makes a bubble. |
| name | string | — | Required. Legend, tooltip, and table label. |
| sizeName | string | "Size" | Label for the third value. Vue: size-name. |
| symbolSize | number | root | Point size override (ignored for bubbles). Vue: symbol-size. |