Area Chart

Usage

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

<AreaChart
  title='Cash flow'
  points={[
    { label: 'Jan', value: 3080, compare: 2860 },
    { label: 'Feb', value: 3410, compare: 3020 },
    { label: 'Mar', value: 3290, compare: 3150 },
  ]}
  changeLabel='vs last year'
/>

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

Props

pointsAreaChartPoint[]

In order along the axis, each with a label, its value, what it’s compared with, and a detail for the tooltip.

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 both lines morph into them, whatever their counts.

name, compareNamestring = 'This year', 'Last year'

What the two lines are called, in the legend and the tooltip.

valuenumber = the total

The big number. The total suits a flow. For a running balance, pass the latest value.

changenumber = against the comparison

How far it moved, as a fraction: 0.124 reads as 12.4%.

changeLabelstring

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

lowerIsBetterboolean = false

For something like spending, where going up is the bad news. It turns round the colours of the change and the difference.

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

• The line and the wash are one window into the foil, seen through the line’s stroke and through the area under it, so the colour runs on from one to the other.
• A new period is reached a frame at a time from wherever the last one got to. When the counts differ, the old shape is read off at the new count first, so it morphs rather than jumps.
• The crosshair snaps to the nearest point and rides the line through a morph. Arrows, Home and End move it from the keyboard, and the tooltip gives both values and the difference.
• The legend hides when the card is under 460px wide, and the labels thin out from the latest backwards. With reduced motion, the lines are drawn and the number set from the start.
• Values are sample data.