Charts
Area chart
Filled trend. Gradient, hatch, stripes, dither, glow — the drawing, not a palette.
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 | "gradient" | "linear" | "natural" | "step" | "dots" | "spark" | "dither" | "glow" | "hatched" | "bars" | "solid" | "stacked" | "stream" | "band" | "ridge" | "riso" | "screentone" | "grain" | "gradient" | How the fill and curve are drawn. hatched and bars are SVG textures. Not a color theme. |
dataKeys | string[] | [dataKey] | Series to compose. Pass two or more for the stacked and stream variants; ignored by the others. |
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. |