BarChart
Vertical bars for your points. Monthly signups below are honest sample data, rendered as a static SVG with no tooltips. Only the vertical orientation is supported.
Monthly signups
<BarChart data={signups} />With values
Pass showValues to print each value above its bar.
<BarChart label="Quarterly revenue" data={revenue} showValues />Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | Array<{ label: string; value: number }> | - | Bars in order, left to right. |
width | number | 560 | viewBox width; the SVG scales to 100%. |
height | number | 240 | viewBox height. |
label | string | "Bar chart" | Chart name; opens the auto-summary. |
showValues | boolean | false | Print each value above its bar. |
layout | "vertical" | "vertical" | Only orientation; vertical bars. |
class | string | - | Style passthrough. |
Static honesty
Static SVG, no tooltips; values appear in text only whenshowValues is set. Bars darken on hover via CSS only. X labels longer than 8 characters are truncated with the full text kept in a <title>. A zero baseline is clamped into the viewBox, so negative values (not shown in the demos) draw below it.
Accessibility
- The chart is an image (
role="img") with an auto-summary label:"{Label}, {n} points, high {maxLabel} {max}, low {minLabel} {min}". - A
<title>repeats the summary and a<desc>describes the reading order. - Every bar carries a
<title>with its"{label}: {value}". - Y ticks come from
niceTicks; tick and axis text uses the muted token at xs size.