Installation
Usage
"use client"
import { BarChart } from "@/components/bar-chart"
export function Revenue() {
return (
<BarChart
title="Revenue, 2026"
series={[{ key: "revenue", label: "Revenue" }]}
data={[
{ label: "Jan", revenue: 18400 },
{ label: "Feb", revenue: 21300 },
{ label: "Mar", revenue: 19800 },
]}
/>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| data | { label: string; [key]: number }[] | — | One entry per category. |
| series | { key; label; color? }[] | — | Series drawn side by side. |
| title | string | — | Names the chart and its data table. |
| showTitle | boolean | true | Show the title above the chart. |
| format | (value: number) => string | — | Formats axis, tooltip and table values. Overrides formatOptions. |
| formatOptions / locale | Intl.NumberFormatOptions / string | compact, visitor's locale | Number format without a function, e.g. { style: "currency", currency: "USD" }. |
| height | number | 240 | Plot height in pixels. |
| legend | boolean | auto | Shown automatically for 2+ series. |
| stacked | boolean | false | Stack the series in one bar per category; the tooltip adds a total. |
| --chart-1 / -2 / -3 | CSS variables | theme | Series colours. |
Accessibility
- A labelled <figure>; the full data is also available as a visually hidden table.
- Each bar is announced as "Mar, Revenue: $19.8K"; Tab enters the chart, arrow keys and Home/End move between bars.
- The tooltip follows hover and keyboard focus.
- Bars appear without growing under prefers-reduced-motion.
Changelog
- v1.0.0Latest
First release.