Scatter Chart

Scatter and bubble charts with a trend line. Pro · Charts and analytics › Trends

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add scatter-chart

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { ScatterChart } from 'valyro-ui-pro';

Props

Prop	Type	Default
`series` *	`ScatterSeries<T>[]`		Groups of points, each in its own color with a legend item; all share the `x`/`y`/`size` fields.
`x` *	`keyof T & string`		Numeric field for the horizontal position.
`y` *	`keyof T & string`		Numeric field for the vertical position.
`size`	`keyof T & string`		Numeric field encoded as bubble area (radius ∝ √value) — makes it a bubble chart.
`name`	`keyof T & string`		Field that names a point in the tooltip and the data table.
`xLabel`	`string`		Axis titles, drawn at the ends of the axes (also the data table headers, which default to the field keys).
`yLabel`	`string`		Title above the y axis; also names y in the tooltip and data table (default there: the `y` key).
`sizeLabel`	`string`		Names the size value in the tooltip and data table. Default: the `size` key.
`xFormatter`	`ValueFormatter`		Formats x values in the tooltip; axis ticks keep its units around a shorter number. Default: compact numbers on the axis.
`yFormatter`	`ValueFormatter`		Formats y values in the tooltip; axis ticks keep its units around a shorter number. Default: compact numbers on the axis.
`sizeFormatter`	`ValueFormatter`		Formats size values in the tooltip and the data table.
`maxBubbleSize`	`number`	`24`	Radius of the largest bubble in px (smaller on narrow charts). Default 24.
`pointSize`	`number`	`4`	Radius of a point without `size`. Default 4.
`trendLine`	`boolean`	`false`	Draws a least-squares trend line per series and shows its R² in the legend.
`height`	`number`	`300`	Plot height in px; width follows the container. Default 300.
`showGrid`	`boolean`	`true`	Grid lines at the x and y ticks; the zero lines are drawn either way.
`showLegend`	`boolean`		Default: shown when there is more than one series or a trend line. Click an item to hide its series.
`loading`	`boolean`	`false`	Shows a placeholder of the same height while data loads.
`locale`	`string`		BCP 47 locale for the default number formatting. Default: the `ThemeProvider` locale, then the browser's.
`labels`	`Partial<ScatterChartLabels>`		Overrides for the built-in strings.
`ariaLabel` *	`string`		Accessible name of the chart (also the caption of its sr-only data table).

Related components

Line Chart — Line charts
Bar Chart — Bar charts
Area Chart — Filled area charts
Sparkline — Tiny inline charts
Confidence Band Chart — Forecast with confidence intervals and outliers, keyboard-readable points
Candlestick Chart — Stock candlesticks with volume and moving averages
Donut Chart — Donut charts
Treemap — Hierarchies as areas, with drill-down
Funnel Chart — Conversion funnels
Sankey Chart — Flow diagrams between stages
Radar Chart — Radar charts for comparing profiles
Heatmap — Heatmaps

Previous: Area Chart · Next: Sparkline · All Charts and analytics