Range Chart

Usage

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

<RangeChart
  title='Fund price'
  days={[
    { date: '2026-11-05', open: 102.8, high: 104.62, low: 102.71, close: 103.96 },
    { date: '2026-11-06', open: 103.71, high: 104.45, low: 103.62, close: 104.38 },
  ]}
  changeLabel='on the day'
/>

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

Props

daysRangeChartDay[]

A day each, oldest first: its date, as 2026-11-06, and its open, high, low and close.

titlestring

Heads the card.

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

The switch in the header. Swap the days when one’s chosen, and they move to their new places.

valuenumber = the latest close

The big number, which counts to each new value.

change, changeLabelnumber, string = the latest close on the one before

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

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

How a price reads in the big number and the tooltip, and on the axis, where pence show only where they’re needed.

heightnumber = 200

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

Notes

• Days that closed up are drawn in the foreground and days that closed down are quieter, so a run either way shows at a glance. The tooltip gives all four prices and how far the day moved.
• Each day opens out from the middle of its range the first time it’s seen, a beat after the one before. A new period moves the days to their places, and the days that arrive or leave open and fold the same way.
• Bars and ticks are two pixels where there’s room and one where it’s tight. Under five pixels a day, the oldest days give way and it keeps the most recent that fit.
• The arrow keys, Home and End move along the days, and each is read out with its prices. With reduced motion, it’s all there at once.
• Values are sample data.