Area Chart

Графики с заливкой. Бесплатно, MIT · Графики и аналитика › Динамика

Установка

npx valyro-cli@latest add area-chart

npx shadcn@latest add https://valyro.xyz/r/area-chart.json

npm install valyro-ui

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

Пропсы

Prop	Type
`stacked`	`boolean`	Stack series on top of each other (the tooltip adds a total). Missing values leave a gap in their own series.
`data` *	`T[]`	Rows to plot, one per x position; a missing or non-numeric value breaks that series' line.
`x` *	`X`	Field used for the x axis (dates or categories), plotted in data order.
`series` *	`ChartSeries<T>[]`	Numeric fields drawn as lines (or areas), each with its legend label and optional color.
`height`	`number`	Plot height in px; width follows the container. Default 240.
`curve`	`'linear' \| 'monotone'`	Default: the theme's `--ui-chart-curve` (`linear` in Vercel, `monotone` in Glass).
`valueFormatter`	`ValueFormatter`	Formats values in the tooltip and data table. Axis ticks keep its units around a shorter number ("$15K").
`tickFormatter`	`ValueFormatter`	Formats the value-axis ticks instead of the shortened `valueFormatter`.
`xFormatter`	`(value: T[X], index: number) => string`	Formats x values for axis labels and the tooltip title.
`locale`	`string`	BCP 47 locale for the default number and date formatting. Default: the `ThemeProvider` locale, then the browser's.
`xLabel`	`string`	Header of the x column in the accessible data table. Default: the `x` key.
`labels`	`Partial<XYChartLabels>`	Overrides for the built-in strings.
`showGrid`	`boolean`	Horizontal grid lines at the value ticks; the zero line is drawn either way.
`showLegend`	`boolean`	Default: shown when there is more than one series.
`loading`	`boolean`	Shows a placeholder of the same height while data loads.
`ariaLabel` *	`string`	Accessible name of the chart (also the caption of its sr-only data table).

Area Chart

Установка

Пропсы

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