Sparkline
Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.
A compact inline line chart with no axes, ideal for showing trends in small spaces. The trace stretches to fill its box, from the lowest value at the bottom to the highest at the top, while its stroke and dot keep their size. A series that never changes is drawn as a level line through the middle.
Import
import { Sparkline } from "~lib/charts/sparkline";
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
data | number[] | Yes | N/A | Data values (min 2 points) |
width | number | string | No | 100 | Chart width in px or CSS length |
height | number | string | No | 30 | Chart height in px or CSS length |
showDot | boolean | No | false | Show dot on the last point |
smooth | boolean | No | false | Use smooth curves instead of lines |