Sparkline
See a value's recent trend beside the number, with gaps where data is missing.
<script setup lang="ts">import { UiSparkline } from 'grani' const RECEIPT = [41.2, 42.8, 40.9, 43.5, 44.1, 42.6, 45.3, 46.9, 45.8, 47.2, 48.9, 46.2] const VISITS = [3200, 3450, 3380, 3710, 3620, 3950, 4120, 3980] const QUARTERS = [18.2, 21.4, 19.7, 24.4]</script> <template> <div class="flex w-full max-w-sm flex-col gap-6"> <UiSparkline :values="VISITS" ariaLabel="Visitors, the last eight weeks" /> <UiSparkline :values="RECEIPT" variant="area" ariaLabel="Average receipt, the last 12 months" /> <UiSparkline :values="QUARTERS" variant="bar" ariaLabel="Dividends, the last four quarters" /> </div></template>
Also called mini chart, trend line, inline chart.
Usage
<UiSparkline :values="values" /> With GraniResolver in the Vite config, a template needs no import: set it up once.
API
| Name · type | Default | Description |
|---|---|---|
| Data | ||
| values*(number | null)[] | The values in order, the newest last; null is no data, a gap. | |
| Behavior | ||
| endpointboolean= true | true | A dot on the newest value of a line or an area. |
| highlightnumber | The index of the value in light: the full bar, or the dot on a line; the newest value when unset. | |
| mark{ at: number; label: string; } | A line of reference across the trend, named at its end: { at: 43.06, label: '12-month average 43.06' }. | |
| Look | ||
| variantline | area | bar= "line" | "line" | line a trend, area the same filled below, bar one box per value from zero. |
| tonebrand | neutral | success | warning | danger | info= "brand" | "brand" | What the trend means: brand for a figure of the product, success or danger for a verdict, neutral for a quiet one. |
| heightnumber= 28 | 28 | The height in pixels; the host sets the width. |
| Form and access | ||
| ariaLabelstring= "" | "" | What the trend shows, for a screen reader: "Average receipt, the last 12 months". Unset, it is decoration. |
Anything else lands on the root element: native attributes, aria-*, data-testid.
When to use another component
| When you need | Take |
|---|---|
| A chart with axes, a legend and a tooltip | Area chart or Bar chart |
| A share of a whole | Progress |
| The verdict beside it | Delta |
| A single figure with a trend as a card | Chart card with bleed="full" |