Bar Chart

Usage

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

const [period, setPeriod] = useState('Month');

<BarChart
  title='Balance'
  points={balances[period]}
  periods={['Week', 'Month', 'Year']}
  period={period}
  onPeriodChange={setPeriod}
  changeLabel='on last month'
/>

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

Props

pointsBarChartPoint[]

Oldest first, each with a label under its bar, a value, and a detail for the tooltip. The last is the latest, and is foil.

titlestring

Over the chart, beside the switch.

periods, period, onPeriodChangestring[], string, function

The periods to switch between, the one shown, and what to do when another is chosen. Swap the points to match, and the bars morph into them.

valuenumber = the latest value

The big number.

changenumber = against the bar before

How far it moved, as a fraction: 0.042 reads as 4.2%.

changeLabelstring

Beside the change and quieter, such as on last month. It hides when the card is narrow.

format, formatAxis(value: number) => string

How a value reads in the number and the tooltip, and on the axis. By default, whole pounds, and compact on the axis.

heightnumber = 200

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

Notes

• Each bar is the whole plot clipped to its rectangle, so growing, sliding and folding away are one transition. Across periods, the latest bar stays the foil one, and any the new period has no room for fold away at the far end.
• The plot is measured and drawn in whole pixels, so the gridlines and edges stay crisp. The gridlines keep their places when the scale changes, and only their labels change.
• Rest on a bar, tap it, or focus the plot and use the arrows, Home and End. The tooltip compares each bar with the one before, and a screen reader hears the plot as a slider, a bar at a time.
• When it’s narrow, the labels thin out from the latest backwards. With reduced motion, the bars and the number arrive as they end.
• Values are sample data.