Spark Line
Show a compact trend without full chart axes.
Preview
Import
import { SparkLine } from "@sigil-ui/components";Usage
<div style={{ display: "flex", gap: 24, alignItems: "center" }}>
<SparkLine data={[10, 25, 18, 32, 28, 45, 40, 55, 50, 62]} />
<SparkLine data={[50, 42, 38, 35, 30, 28, 22, 18, 15, 10]} color="var(--s-error, #ef4444)" />
<SparkLine data={[5, 12, 8, 15, 22, 18, 25, 30, 28, 35]} color="var(--s-success, #22c55e)" />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | number[] | — | — |
width | number | — | — |
height | number | — | — |
color | string | — | — |
filled | boolean | true | Fill area under line. |
showEndDot | boolean | true | Show a dot at the last data point. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-primary | Primary |