Charts
Line chart
Stroke only. Dashed, ping, rainbow, numbered dots, a soft glow, a dotted projection, or twin axes.
Props
| Property | Type | Default | Description |
|---|---|---|---|
data | ChartDatum[] | — | Rows to draw. Each object is a point or category. |
dataKey | string | "value" | Numeric field on each row. |
config | ChartConfig | — | Map of dataKey → { label?, color? }. Colors fall back to --chart-1. |
className | string | — | Chart container. Default height is 220px; spark looks better around 88px. |
labelKey | string | "date" | X-axis field. Usually an ISO date. |
variant | "monotone" | "linear" | "step" | "dashed" | "dots" | "dither" | "glow" | "ping" | "rainbow" | "values" | "focus" | "anomaly" | "riso" | "forecast" | "dual" | "monotone" | Stroke interpolation and decoration. ping pulses the last point; rainbow strokes --chart-1…5; values labels dots. forecast extends a dotted trend past the last measured point over a tinted span. dual gives each of two keys its own y-axis, tinted to its series. |
dataKeys | string[] | [dataKey] | Series to draw. Pass several for variant="focus", and exactly two for variant="dual" (first key left axis, second right); ignored by the other variants. |
forecastPeriods | number | 7 | How many periods variant="forecast" projects past the last real point. Labels continue the series' own cadence when they parse as dates, and fall back to +1…+n when they do not. |
forecastWindow | number | 14 | How much of the tail the least-squares trend is fitted to. Client-side, no model and no service — a straight line is the weakest claim still worth drawing, and looking like one is why it reads as a projection. |
anomalyThreshold | number | 3.5 | How far from the rolling median a point must sit to be ringed by variant="anomaly", in MAD-derived standard deviations. Strict by default: ringing every wobble trains people to ignore the rings. |
emphasizeLast | boolean | false | Terminal dot plus a value pill on the final point. Drawn on its own layer, so it composes with any variant. |
previous | ChartDatum[] | — | Previous-period rows, drawn dashed underneath and aligned by index rather than by date. Adds a Previous row to the tooltip. |
annotations | Annotation[] | — | { at, label, kind? } per marker, where at matches a labelKey value. kind is "deploy" | "release" | "incident" | "note" and only sets the colour. |
brush | boolean | false | Drag-to-zoom strip under the chart. |
scale | "linear" | "log" | "symlog" | "linear" | Y-axis scale. log is pinned to 1 because it cannot represent zero. symlog uses a custom d3 scale and remains defined for negative values and zero. |
gaps | "bridge" | "break" | "bridge" | How a null is drawn: joined across, or left open. Neither coerces the missing point to zero, which would draw a cliff that reads as a traffic collapse. |