Trend chart
A time series with a toolbar: line or candles, minimap, pan and go-to-now, auto-refresh, PNG and CSV export, full window, plus limit lines, event markers and shaded bands.
For readings over time: a process value, a meter, a queue length. Every feature is off until its prop is passed, so <TrendChart data={points} /> is a plain zoomable line. Ctrl + wheel (or a trackpad pinch) zooms; dragging the plot pans; a plain wheel still scrolls the page. Comparison series share the one y-axis: two units on one plot need two charts. Candles bucket the raw readings (open, high, low, close per bucket) and draw each bucket’s mean as a line.
Process trend with limits, events and a maintenance band
Starts in candles over the last 16 hours. Switch to Line, open the minimap, pan back, then Now. Set refresh to 2 s to stream readings in.
Compare series and a moving average
Options
Everything you can pass to Trend chart.
| Prop | Type | Default | What it does |
|---|---|---|---|
| data | TrendPoint[] | — | { at, value }. at is a Date, epoch ms or ISO string; a null value is a gap. |
| name / title / unit | string / ReactNode / string | 'Value' | Series name (legend, tooltip, CSV), toolbar title, axis name and value suffix. |
| limits | { value, label, tone? }[] | — | Dashed horizontal lines. Without a tone the label decides: USL/LSL/HiHi/LoLo danger, Hi/Lo/UCL/LCL warning, Target/SP accent. |
| fitLimits | boolean | true | Widen the y-axis so every limit is on screen. |
| events | { at, label, tone? }[] | — | Vertical dashed markers with a rotated label. |
| bands | { from, to, label, tone? }[] | — | Shaded spans such as maintenance or a shift. |
| compare | { name, data, color? }[] | — | Extra series on the same axis, in --chart-2… by default. |
| movingAverage | number | — | Window in readings for a dashed simple-moving-average overlay. |
| defaultMode / onModeChange | 'line' | 'candles' | 'line' | Initial view and a callback when the reader switches. |
| bucket | number (ms) | about 48 candles | Candle width, rounded to a clean duration by default. |
| defaultMinimap | boolean | true | The slider with a preview of the whole series. |
| window | number (ms) | everything | Initial visible span, ending at the latest reading. |
| refreshOptions / defaultRefresh / onRefresh | { label, ms }[] / number / () => void | — | Interval select (ms 0 is off) and the callback each tick and the refresh button call. |
| exportName | string | 'trend' | File name for the PNG and CSV downloads. |
| valueFormatter / timeFormatter | (value) => string / (ms) => string | — | Axis, tooltip and summary formatting. |
| color / height / toolbar | string / number / boolean | --chart-1 / 320 / true | Main series colour token, plot height, hide the toolbar for a read-only embed. |