Bar Chart
Compares values across categories as columns or bars, grouped or stacked.One series
Preview
Code
People reached by stateQ3 2026, all sectors
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/chartsnpm
npm install @advui/chartsUsage
import { BarChart } from '@advui/charts'
<BarChart
title="People reached by state"
data={[{ state: 'Kachin', reached: 182000 }, { state: 'Shan', reached: 246000 }]}
index="state"
series={[{ key: 'reached', label: 'People reached' }]}
/>Examples
Grouped
Preview
Code
Planned vs reached, by sectorThousands of people, 2026
Planned
Reached
Stacked, horizontal
Preview
Code
Active organizations by townshipBy organization type
UN
INGO
NGO
API reference
BarChart
| Prop | Type | Default | Description |
|---|---|---|---|
title required | string | — | Names the chart: its heading and accessible name. |
description | string | — | Muted line under the title (units, period). |
data required | T[] | — | One object per category or x position. Its type `T` (an interface works) is inferred, and `index` and `series` must name its fields. |
index required | keyof T & string | — | Field holding each row’s label. |
indexLabel | string | `index` | Heading of the label column in the table view. |
series required | { key: keyof T & string; label: string }[] | — | Numeric fields to plot. Colors follow this order (`chart1`…`chart8`), never the values. An array declared apart from the chart needs `as const` to keep its keys literal. |
layout | 'vertical' | 'horizontal' | 'vertical' | `horizontal` bars suit long category names. |
stacked | boolean | false | One bar per category, split by series (part-to-whole). |
valueFormatter | (value: number) => string | — | Formats tooltip and table values. Axis ticks are compact (1.2K). |
height | number | 240 | Pixels, including the axes. |
width | number | — | Fixed width. By default it fills its container. |
labels | Partial<ChartLabels> | — | "Show table", "Hide table" and the keyboard hint, for translation. |
Accessibility
- The chart is a
figurenamed by its title. The plot is one focusable image whose name gives the title, description and a hint; the arrow keys (Home / End too) step through the values, which a polite live region reads out. - Every chart has a table view ("Show table") with the same values, so nothing depends on seeing colors or hovering.
- Identity never relies on color alone: two or more series get a legend, and the tooltip names each value.
- Colors come from the
chart1…chart8theme keys, a palette checked for color-blind separation in light and dark mode.
| Key | Action |
|---|---|
| Tab | Focuses the plot, then the table button. |
| Arrow keys / Home / End | Move between values and read them. |
| Escape | Hides the tooltip. |
Responsive behavior
Fills its container; category labels thin out when they would overlap. Use horizontal for long names on phones.
Platform notes
Web
SVG in the page. Hover shows the tooltip; the arrow keys work once the plot has focus.
iOS
Drawn with react-native-svg. Tap the plot to show the tooltip for that point. VoiceOver and TalkBack read the title and description, without the arrow-key hint; Show table lists every value.
Android
Same as iOS.