Stacked Bars

Usage

import { StackedBars } from '@wdzyi/ui';

<StackedBars
  title='Cash flow'
  series={[
    { key: 'income', label: 'Income' },
    { key: 'spending', label: 'Spending' },
  ]}
  points={[
    { label: 'Sep', values: { income: 6880, spending: 4520 } },
    { label: 'Oct', values: { income: 7140, spending: 4690 } },
  ]}
  value={4810}
  change={0.084}
  changeLabel='on last month'
/>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

pointsStackedBarsPoint[]

A bar each, oldest first: a short label under it, a detail for its tooltip, such as March 2026, and each layer’s amount by key.

seriesStackedBarsSeries[]

The layers from the baseline up, each a key and a label. Up to four, each a step of the foreground.

titlestring

Heads the card.

periods, period, onPeriodChangestring[], string, (period: string) => void

The switch in the header. Swap the points when one’s chosen, and the bars move to them.

valuenumber = the total showing

The big number, which counts up to each new value.

change, changeLabelnumber, string

How far the big number moved, as a fraction, beside it in green or pink, then quieter words such as on last month. The words go when the card is narrow.

format, formatAxis(value: number) => string = pounds

How an amount reads in the big number and the tooltip, and on the axis, where it’s compact, like £12k.

legendboolean = true

The legend under the bars, whose layers turn off and on.

heightnumber = 200

The plot’s height in px. In a card with a height of its own, the plot fills what’s left.

Notes

• The month in focus is cut from the foil: the latest, until the pointer, a tap or the arrow keys pick another. Its figures come up in a tooltip that glides from month to month.
• Turning a layer off settles the stacks to their new heights while the axis eases to its new top. A new period moves the bars to their places, growing the months that arrive and folding away the ones that leave.
• It draws in real pixels at any width, and the months thin to every second or third as it narrows, always keeping the latest.
• To a screen reader the plot is a slider: the arrow keys, Home and End move along the months, and each is read out with its figures. With reduced motion, everything is where it ends up straight away.
• Values are sample data.