Bar Chart

Столбчатые диаграммы. Бесплатно, MIT · Графики и аналитика › Динамика

Установка

npx valyro-cli@latest add bar-chart

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

npm install valyro-ui

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

Пропсы

Prop	Type	Default
`data` *	`T[]`		Rows to plot, one bar group per row; a missing or non-numeric value draws no bar.
`x` *	`X`		Category field (one group of bars per row).
`series` *	`ChartSeries<T>[]`		Numeric fields drawn as bars, each with its legend label and optional color.
`orientation`	`'vertical' \| 'horizontal'`	`'vertical'`	`vertical`: columns. `horizontal`: rows of bars with category labels on the left.
`stacked`	`boolean`	`false`	Stack series instead of placing them side by side.
`showValues`	`boolean`	`false`	Print values at the end of each bar (stack totals when stacked); hidden where they don't fit.
`height`	`number`		Default 240 for columns; horizontal charts grow with the number of rows.
`radius`	`number`		Corner radius of the bar end. Default: the theme's `--ui-bar-chart-bar-radius` (2px in Vercel, capsule in Glass).
`valueFormatter`	`ValueFormatter`		Formats values in the tooltip, bar labels 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 category 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 category column in the accessible data table. Default: the `x` key.
`labels`	`Partial<BarChartLabels>`		Overrides for the built-in strings.
`showGrid`	`boolean`	`true`	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`	`false`	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).

Bar Chart

Установка

Пропсы

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