Sparkline
Stripe SparklineA trend beside a figure or inside a table cell: plain SVG, no axes, no dependencies. Teal by default; tone="trend" turns it green going up and red going down. Takes numbers, or objects with y naming the value field, and width="fill" stretches it to its cell.
Tones and area
brand (default)
neutral
trend, going up
trend, area
In a table
Objects with y, filling the cell.
| Branch | Last 4 days |
|---|---|
| Andheri | |
| Bandra |
When to use
- Beside a value in a StatGroup.
- A column of trends in a table.
Not for
- Anything someone must read exact values from — use a chart.
Props
| Prop | Type | Description |
|---|---|---|
| data | (number | T)[] | Numbers, or objects read through y. |
| y | keyof T | (d: T) => number | The value field of each object. |
| width | number | "fill" Default 64 | fill stretches to the container. |
| height | number Default 20 | In pixels. |
| tone | "brand" | "neutral" | "done" | "failed" | "trend" Default "brand" | trend: green up, red down. |
| variant | "line" | "area" Default "line" | area adds a soft fill. |
| strokeWidth | number Default 1.5 | Line thickness; kept when stretched. |
| label | string | Screen-reader text; without it the line is decorative. |
| className | string | Extra classes on the outer element. |