KQ-039 · SPARK/CHART
Spark Chart
A compact line or area chart that draws itself on arrival, then lets you scrub a crosshair that snaps to the nearest point and reads its value.
KQ-039 · SPARK/CHART
p95 request latency over the last 24 hours: 24 points, from 38 ms to 156 ms
Hover or arrow-key to scrub.
request throughput over the last 24 hours: 24 points, from 161 req/s to 770 req/s
Hover or arrow-key to scrub.
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/spark-chart
Props
- data
- number[] | { x: number | string; y: number }[]
- default —
- Bare numbers get index labels; objects carry their own x.
- variant
- "line" | "area"
- default "line"
- Stroke only, or a filled area under the curve.
- height / format
- number / (y) => string
- default —
- Chart height in px and value formatting for the readout.
- label
- string
- default —
- Accessible name and summary for the trace.
| Prop | Type | Default | Description |
|---|---|---|---|
| data | number[] | { x: number | string; y: number }[] | — | Bare numbers get index labels; objects carry their own x. |
| variant | "line" | "area" | "line" | Stroke only, or a filled area under the curve. |
| height / format | number / (y) => string | — | Chart height in px and value formatting for the readout. |
| label | string | — | Accessible name and summary for the trace. |