ISparkline ​

A trend line small enough to sit inside a sentence or a stat tile, in plain SVG with no charting dependency.

<script setup lang="ts">
const revenue = [18, 22, 19, 27, 31, 29, 36, 34, 41, 44, 42, 48]
</script>

<template>
  <ISparkline :data="revenue" />
</template>

The width always fills the container; height (32px by default) is the only dimension you set. Values are oldest first — there is no x axis, so the order in the array is the time axis.

Area and the end dot ​

area adds a wash beneath the line, which holds up better on a busy surface — the same downward-fading gradient ILineChart uses, so the two read as one family. endDot marks the most recent point.

<ISparkline :data="revenue" variant="area" />
<ISparkline :data="revenue" variant="area" end-dot />
<ISparkline :data="revenue" end-dot />

baseline decides where the wash stops: min (the default) fills from the lowest point and shows the shape; zero fills from nothing and shows the magnitude.

<ISparkline :data="revenue" variant="area" baseline="min" />
<ISparkline :data="revenue" variant="area" baseline="zero" />

Gaps ​

null is a missing reading rather than a zero, and the line breaks rather than bridging it.

<ISparkline :data="[12, 15, null, null, 21, 24]" end-dot />

One scale across several ​

Each sparkline scales to its own data. Pin min and max on both to put two of them on one scale.

<ISparkline :data="revenue" :min="0" :max="50" />
<ISparkline :data="churn" :min="0" :max="50" />

Muted ​

muted draws in de-emphasised ink, for a trend that supports a number rather than competing with it — the case inside an IStat tile.

<ICard>
  <p class="text-sm text-muted-foreground">Revenue</p>
  <p class="text-2xl font-semibold">€48,200</p>
  <ISparkline :data="revenue" muted variant="area" />
</ICard>

Height ​

<ISparkline :data="revenue" :height="16" />
<ISparkline :data="revenue" :height="32" />
<ISparkline :data="revenue" :height="64" />

Accessibility ​

Without a label the sparkline is decorative and hidden from assistive technology, which is right beside a value that already states the number. Give it a label when the trend is the only place the information lives.

<ISparkline :data="revenue" label="Revenue over the last twelve months, rising from 18 to 48" />

Animation ​

A sparkline can reveal itself like ILineChart does — the line and its wash uncovered together, left to right — but it is off by default here. A sparkline usually sits in a stat tile or a table row, and twenty of them animating at once is a distraction rather than an arrival.

<ISparkline :data="revenue" variant="area" end-dot :animate="{ easing: 'ease-out', duration: 700 }" />

<!-- The default -->
<ISparkline :data="revenue" />

animate takes true for the default reveal, or an object to tune it: duration in milliseconds and easing, one of ease-out (the default), ease-in, ease-in-out or linear.

It plays once per instance, and a reader who has asked for reduced motion gets the finished sparkline with no animation at all.

Props ​

For an axis, a tooltip and more than one series, use ILineChart.