Scatter Chart

Точечные и пузырьковые диаграммы с линией тренда. Pro · Графики и аналитика › Динамика

Установка

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';

Пропсы

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).

Scatter Chart

Установка

Пропсы

Похожие компоненты