Sparkline
A trend line that fills its container, without a chart library.
import
import { Sparkline } from '@joshicodes/cock';Trends
Eggs per day
21
Fox sightings
3 this week
Coop temperature
18 °C
Behaviour
- The line keeps its stroke width while the SVG stretches, and the end dot stays round.
- Give it a `label`: to a screen reader a sparkline is a picture and needs describing.
API
Read out of the component sources at build time, so it matches the version you installed.
Every component also takes class, merged
through tailwind-merge so your utility wins.
Props of Sparkline
| Prop | Type | Default |
|---|---|---|
data required | number[] | — |
height Drawn height in pixels; the width follows the container. | number | 32 |
fill Fill the area under the line with a fade. | boolean | true |
dot Mark the last value with a dot. | boolean | true |
strokeWidth | number | 1.75 |
label Describe the trend for screen readers, e.g. "Up 12% this week". | string | — |
class Colour comes from `currentColor`; the default is the accent. | string | — |