Bar Chart

Bar charts. Free, MIT · Charts and analytics › Trends

Installation

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

Props

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

Related components

Line Chart — Line charts
Area Chart — Filled area charts
Scatter Chart — Scatter and bubble charts with a trend line
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: Line Chart · Next: Area Chart · All Charts and analytics