Sparkline
Small inline trend chart for KPI cards and dense tables.
stable
Quick Preview
Revenue₦4.2M
New listings128
Cancellations12
Usage
<SparklineLine data={[40, 44, 52, 60]} />
<SparklineArea data={[40, 44, 52, 60]} />
<SparklineBar data={[40, 44, 52, 60]} />The render style is the component you pick — there are three: SparklineLine, SparklineArea, and SparklineBar. All share the same props, layout table, and auto sentiment colour (up = success, down = danger, flat = secondary), so switching style is a one-word change.
Examples
The three render styles
SparklineArea, SparklineLine, and SparklineBar in KPI tiles — colour follows each series' sentiment automatically.
Revenue₦4.2M
New listings128
Cancellations12
Interactive tooltip
An area sparkline with a hover tooltip, currency formatting, and per-point month captions.
Revenue · trailing 7 months
Props
| Prop/API | Type | Default | Description |
|---|---|---|---|
data | number[] | - | Series values (needs ≥ 2 points to draw). |
size | one of sm, md, lg | inherited | Height + stroke/dot scale; width is parent-driven. |
trend | one of up, down, flat | auto | Sentiment colour override. |
showMarker | boolean | true | End-point marker on the latest value. |
tooltip | boolean | false | Enable the hover tooltip. |
label / labels | string / string[] | - | Tooltip series name and per-point captions. |
valueType | one of number, percentage, currency | number | Tooltip value formatting. |
className | string | - | Local layout or spacing overrides. |
Accessibility
- Provide visible labels or accessible names for interactive controls.
- Preserve the component-provided focus, keyboard, disabled, and invalid-state behavior.
- Do not communicate state with color alone; include text, icons, or helper copy.