components / sparkline
sparkline.
tiny inline svg trend line — 80x24 by default so it sits in a line of text. linear or catmull-rom smooth, optional area fill and square point markers, no chart library and no dependencies.
machine learning
cybersecurity
working out
installation
bunx @justin06lee/chrome@latest add sparklineprops
| name | type | default | description |
|---|---|---|---|
| values * | number[] | - | the series, oldest first. one value renders a flat line. |
| width | number | 80 | intrinsic width in px (viewBox units; the svg still stretches to its css box). |
| height | number | 24 | intrinsic height in px. |
| stroke | string | 'currentColor' | line color; inherits the surrounding text by default. |
| strokeWidth | number | 1.5 | line thickness in px, kept 1:1 under stretching. |
| fill | string | - | area fill under the line. omit for a bare line. |
| showDots | boolean | false | mark every point with a small square. |
| highlightLast | boolean | false | mark only the last point. ignored when showDots is set. |
| min | number | - | scale floor; defaults to the series minimum. |
| max | number | - | scale ceiling; defaults to the series maximum. |
| curve | "linear" | "smooth" | 'linear' | polyline, or a catmull-rom curve that still passes through every sample. |
| label | string | - | accessible name; a value-range summary is generated when omitted. |
| className | string | - |