All components (204)

Bar chart

Data · BarChart · .amset-bars

What it is and when to use it

The bars of a dashboard: sales by category, orders per day, visits per channel. The drawing is the decoration and the table is the data: below it there is a real table, hidden from view unless requested.

When to use it

To compare quantities across a few categories (3 to 12) at a glance.
orientation="rows" when the names are long; tableVisible when the exact number matters as much as the shape.
max so that two charts that are compared share the same scale.
format to write the values (euros, units); without it, numbers in the language of the LocaleProvider. valueName is the header of the values column in the table ("Value" by default).
markers for a reference line over the bars (the group average, a target): it crosses all of them at its value and counts toward the axis ceiling and the table.
detail on a bar for a second figure shown next to its number ("+8 pts"); only in rows, and in columns it stays in the table.
tone colors the bars; axes and values remove or add the axis and the figures.

When not to

For change over time, with many points: Trend.
For the parts of a total: DonutChart.
For a single figure with its change: Stat.

Keyboard: none: there is nothing to press.

Accessibility: the drawing is an image (role="img") with the written summary ("5 bars, total 7810 €. The highest, Rings with 3240 €. The lowest, Watches with 310 €") and the table, with row and column headers, is always there for the screen reader. They are boxes with a percentage height, not an SVG: they print and zoom without distortion. The axis rises to the round number above the largest value.

Fine-tuning: CSS variables --amset-bars-*: -axis, -bar, -cap, -figure-slot, -footer, -gap, -height, -label, -name (what the name takes in rows), -thickness. The size changes the height of the drawing (8, 11.25 or 15 rem), the thickness of the bar and the axis; height still wins if it is passed.

What it looks like

82July

51August

118September

Orders per month
Item	Value
July	82
August	51
September	118

<BarChart
  label="Orders per month"
  data={[
    { key: 'jul', label: 'July', value: 82 },
    { key: 'sep', label: 'September', value: 118, tone: 'success' },
  ]}
/>

Props

Import it with import { BarChart } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`data`required	`readonly DataBar[]`	—
`label`required	`string`	What is being compared. Required: a chart without a title does not inform.
`axes`	`boolean`	Background lines with their number.
`className`	`string`	Merged with the library classes; it does not replace them.
`format`	`(value: number) => string`	—
`height`	`number`	Height of the drawing when they are columns.
`markers`	`readonly BarMarker[]`	Reference lines over the bars (the average, a target): they count toward the axis ceiling and appear in the table.
`max`	`number`	Manual ceiling of the axis, to compare two charts with the same scale.
`orientation`	`"rows" \| "columns"`	`columns` rises from the floor; `rows` grows sideways.
`size`	`"sm" \| "md" \| "lg"`	—
`tableVisible`	`boolean`	Also shows the table. For the screen reader it is always there.
`tone`	`"neutral" \| "accent" \| "secondary" \| "tertiary" \| "info" \| "success" \| "warning" \| "error"`	The series color, from the common vocabulary (`neutral` for the secondary one).
`valueName`	`string`	What the values column is called in the table.
`values`	`boolean`	The number on top of (or at the end of) each bar.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-bars-axis`	`3rem`
`--amset-bars-footer`	`1.5rem`
`--amset-bars-cap`	`1.25rem`
`--amset-bars-height`	`11.25rem`
`--amset-bars-bar`	`3.5rem`
`--amset-bars-thickness`	`0.875rem`
`--amset-bars-gap`	`var(--amset-space-2)`
`--amset-bars-figure-slot`	`3.5rem`
`--amset-bars-label`	`var(--amset-text-xs)`
`--amset-bars-name`	`8rem`
`--amset-bars-row-gap`	`var(--amset-space-3)`

How to change it

.amset-bars {
  --amset-bars-axis: ...;
  --amset-bars-footer: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: