All components (244)

Stacked bars

Data · StackedBarChart

What it is and when to use it

Stacked bars: one stack per category with a segment per series, to see at once the total and what it is made of ("sales per month and per channel"). It shares the data, the scale, the legend and the table with LineChart and AreaChart.

The drawing is decoration and the table is the data: below it there is a real table (one row per category, one column per series), hidden from view unless tableVisible is set. Hovering a stack shows the value of each series and the total.

When to use it

A few categories (months, shops, weeks) where the total of each one and the split between series matter.
The order of series is the order of the stack: the first one goes at the bottom. Values are positive: a negative or a null draws no segment and does not add to the total.
The axis always starts at zero; min and max fix the scale by hand, to compare two charts.
format writes the values (euros, units) on the axis, on hover, in the summary and in the table; categoryName is the header of the first column of the table.

When not to

A single series, or comparing categories without a split: BarChart.
The evolution over many points: AreaChart with stacked, or LineChart.
Parts of a total at a single moment: DonutChart.

Keyboard: by default none: there is nothing to press. With toggleSeries the legend is a row of buttons (Tab and Enter or Space hide or restore a series) and with onPointPress every value in a category tooltip is a button reached with Tab. The complete data is in the table.

Accessibility: the drawing is an image (role="img") with a written summary of each series (where it goes from and to and where it peaks) and the table is always there for the screen reader. Colour is never the only clue: the legend (by default, only with more than one series) and the summary carry the name of each series, and each segment is separated from the one above by a line in the background colour.

Fine-tuning: CSS variables --amset-series-*: -axis, -bar (the widest a stack can be), -cap, -footer, -height and -label. The size moves the height (10, 14 or 18 rem) and the maximum width of the stack; height wins if passed. The colour of each series comes from its tone.

What it looks like

Chart type

LinesStacked areas

Stacked bars

Store
Online
Wholesale

Sales by month and channel
Month	Store	Online	Wholesale
Jul	6,900	5,100	1,900
Aug	5,200	5,600	2,400
Sep	7,800	6,300	2,800

<StackedBarChart
  label="Sales by month and channel"
  categories={['Jul', 'Aug', 'Sep']}
  series={canales}
  categoryName="Month"
  tableVisible
/>

Props

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

Prop	Type	What it does
`categories`required	`readonly string[]`	What goes on the bottom axis: the months, the days. One per value of each series.
`label`required	`string`	What is being measured. Required: a chart without a title does not inform.
`series`required	`readonly ChartSeries[]`	—
`axes`	`boolean`	Background lines with their number.
`categoryName`	`string`	What the first column of the table is called. By default, "Period".
`className`	`string`	Merged with the library classes; it does not replace them.
`format`	`(value: number) => string`	—
`grouped`	`boolean`	The bars of each category sit side by side, each from zero, instead of stacked. `false` by default.
`height`	`number`	Height of the drawing in pixels. By default, that of the size.
`hiddenSeries`	`readonly string[]`	The keys of the hidden series, when the chart's user keeps them. Without it, the chart keeps them itself.
`legend`	`boolean`	The legend with the name of each series. By default, only if there is more than one.
`max`	`number`	—
`min`	`number`	Minimum and maximum of the axis set by hand, to compare two charts on the same scale.
`onHiddenSeriesChange`	`(hidden: readonly string[]) => void`	Called with the hidden keys after a legend entry is pressed.
`onPointPress`	`(point: ChartPoint) => void`	Makes every value pressable (in the tooltip of its category, also by keyboard and touch) and hands over the pressed point.
`referenceBands`	`readonly ChartReferenceBand[]`	Horizontal reference bands: an acceptable range.
`referenceLines`	`readonly ChartReferenceLine[]`	Horizontal reference lines: a target, an average.
`size`	`"sm" \| "md" \| "lg"`	—
`tableVisible`	`boolean`	Also shows the table. For the screen reader it is always there.
`toggleSeries`	`boolean`	The legend stops being a label and each entry becomes a button that hides or restores its series. `false` by default.

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

In the test bench

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