Bar Chart

Values compared across categories or periods as bars: one series, several side by side, or stacked. Plain SVG.

$ pnpm dlx shadcn@latest add https://dashral.com/r/bar-chart.json

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/bar-chart.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/bar-chart

Usage

example.tsx

1import { BarChart } from "@/components/dashral/bar-chart"
2
3<BarChart
4  data={[
5    { month: "Jan", orders: 120 },
6    { month: "Feb", orders: 164 },
7    { month: "Mar", orders: 198 },
8  ]}
9  index="month"
10  series={[{ key: "orders", label: "Orders" }]}
11  aria-label="Orders by month"
12/>

Examples

This year and last

Several series stand side by side; give the comparison a quieter color.

2026
2025

Signups by plan

stacked makes one bar of every series, its height their total; only the top is rounded.

Free
Pro
Team

API reference

BarChart

Also takes every prop of <div>(opens in a new tab).

Prop	Type	Default
`data`	`Record<string, string \| number>[]` The rows, in order along the x axis. Required.	—
`index`	`string` The key for the x axis: a label, or a timestamp or ISO date with timeFormat. Required.	—
`series`	`{ key, label, color?, dashed? }[]` What to draw, in order; colors default to --chart-1 … --chart-5. Required.	—
`stacked`	`boolean` One bar per column with every series in it, its height their total; otherwise side by side.	`false`
`radius`	`number` Corner radius of a bar's end; the end on the axis stays square.	`4`
`height`	`number` In pixels, axes included; the width follows the container.	`260`
`formatOptions`	`Intl.NumberFormatOptions` How values are written in the tooltip, e.g. { style: "currency", currency: "USD" }; the axis writes them compactly.	—
`timeFormat`	`Intl.DateTimeFormatOptions` Reads the index as dates and writes them like this.	—
`showLegend`	`boolean`	`more than one series`
`showGrid`	`boolean` Dashed lines at the axis values.	`true`
`showYAxis`	`boolean` The values along the left.	`true`
`locale`	`string`	`the LocaleProvider's`
`aria-label`	`string` What the chart shows, e.g. “Revenue by month”.	`"Trend from … to …"`
`classNames`	`{ legend, tooltip }`	—

Keyboard

Keys	Action
`Tab`	Focus the chart
`←`or`→`	Read the previous or next point
`Home`or`End`	The first or last point
`Esc`	Stop reading

Accessibility

A group named by your label (by default, how the first series went); the point you move to with the arrow keys is read out with every series' value.
The x axis runs left to right in every language, as on most charts; the legend and tooltip follow the page's direction.
The tooltip lists every series by name, so nothing depends on telling colors apart.

Motion

The bars grow up from the axis when it first shows, and to their new heights when the data changes. Instant with reduced motion.