Combo Chart

Usage

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

<ComboChart
  title='Savings'
  volumeLabel='Deposits'
  points={[
    { label: 'Aug', volume: 49800, rate: 4.2 },
    { label: 'Sep', volume: 54600, rate: 4.3 },
    { label: 'Oct', volume: 57200, rate: 4.35 },
  ]}
/>

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

Props

pointsComboChartPoint[]

A month each, oldest first: a short label, a detail for its tooltip, its volume for the bar and its rate in percent for the line.

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 and the line move to them.

valuenumber = the total volume

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

change, changeLabelnumber, string

How far the big number moved, as a fraction, then quieter words beside it. The words go when the card is narrow.

volumeLabel, rateLabelstring = 'Volume', 'Rate'

What the bars and the line are called, in the legend and the tooltip.

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

How a volume reads in the big number and the tooltip, and on the left axis, where it’s compact.

formatRate(rate: number) => string = two places

How a rate reads in the tooltip, like 4.25%. The right axis keeps to as few places as it needs.

legendboolean = true

The legend under the chart, which says which is which.

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 rate’s axis is worked out in the same number of steps as the volume’s, from a round floor under the lowest rate, so both read off the same gridlines and neither floats.
• The line is a stroke of foil over the bars, and the month in focus is a square on it, ringed in the card’s colour so it sits clear of the stroke. On a light page the line deepens, as the foil’s text does, so it doesn’t wash out.
• The bars grow in as the line draws itself across them. A new period moves the bars to their places, and the line folds out of its neighbours or back into them, so it’s never broken.
• The arrow keys, Home and End move along the months, and each is read out with both figures. With reduced motion, it’s all there at once.
• Values are sample data.