Forecast chartPro
History as a solid line and the forecast as a dashed one inside its 80% and 95% bands, split by a Today rule, with a hover and keyboard readout, a horizon control and the horizon total.
On this page
ProTen weeks of daily orders with a weekly rhythm and an 80% and 95% forecast band; the horizon steps from 14 to 30 to 7 days.
Installation
Usage
import { ForecastChart } from "@/components/ui/chatcn/pro/forecast-chart"
<ForecastChart
title="Daily orders"
unit="orders"
history={history}
forecast={forecast}
horizons={[7, 14, 30]}
/>Pass your model's points as { t, value, lo, hi, lo95, hi95 }, as long as the longest horizon. holtWinters in chatcn-pro-data-a produces that shape from a series for a first look. The footer sums the forecast over the horizon; the range it shows sums the bounds, which is wider than the true interval of the total.
Examples
States
ProRecomputing, a 30 day horizon, not enough history, loading, error and narrow.
Props
| Prop | Type | Notes |
|---|---|---|
history | { t, value }[] | Epoch ms, oldest first |
forecast | ForecastPoint[] | { t, value, lo, hi, lo95, hi95 } |
horizon, defaultHorizon, onHorizonChange, horizons | number | In steps; default choices 7, 14, 30 |
historyWindow | number | History points to show, default 42 |
forecasting | boolean | The old forecast steps back while the model reruns |
unit, valueFormat, model, height, locale | Labels and formats | |
loading, error, onRetry | Chart states |
Keyboard
| Key | Action |
|---|---|
| Left and Right on the chart | Move the readout a day |
| Home and End on the chart | First history day, last forecast day |
Accessibility
- The chart image is labelled with the last value, the horizon total and its range.
- History and forecast differ by dash as well as color, and the bands have a legend.
- The horizon control is a toggle group named Forecast horizon.
Motion
A new horizon slides the time axis to its new end over 280 ms on the kit's ease-out, interruptible. Hover readouts are instant. Reduced motion jumps the axis.