Charts · Time series
Line and area
One component covers the line family: smooth, step, area, band, stacked, positive/negative and missing values are all properties of a series, not separate chart types.
Multi-series with a legend and a range
Three prepared series, the legend doubling as the visibility control, a trailing range selector and a fullscreen research view.
Close with moving averages
Line weight
Smooth and step are attributes of the same series model.
Smooth
Interpolated join, no symbols past 60 points.
Step
For values that change discretely, such as a policy rate.
Area
Gradient fill by default; stacking is a property, not a different component.
Gradient area
A single series, filled toward the axis.
Stacked area
Three revenue lines sharing one stack key.
Range and direction
A confidence band is a transparent stacked base plus a filled range; positive/negative areas are two series split at zero.
Confidence band
Prepared upper and lower bounds; the chart does not compute them.
Positive / negative area
Daily change split at zero, ready for a div-based renderer.
Gaps, thresholds and events
Missing values are gaps, never zeros; reference lines and event markers are annotations on the same chart.
Missing values
Null points break the line instead of dropping to the axis.
Thresholds and events
A reference line, a reference band and two event markers, all prepared data.
Usage
The band trick is worth copying verbatim when you need an envelope.
<LineChart
data={rows}
xKey="time"
series={[
{ key: "bandBase", stack: "band", area: true, color: "transparent", lineWidth: 0 },
{ key: "bandWidth", stack: "band", area: true, tone: "accent", lineWidth: 1 },
{ key: "close", tone: "neutral", lineWidth: 1.6 },
]}
/>