Sparkline

A tiny line chart without axes, for showing a trend inside a metric card.

1<template>2  <MetricCard label="Total cost" :value="formatUsd(total)">3    <template #chart>4      <Sparkline :data="daily" :value="(d) => d.costUsd" />5    </template>6  </MetricCard>7</template>

Props

Name	Type	Default
data	T[]	-
value	(d: T) => number \| null	-
color	string	"var(--color-chart-chart-1)"
height	number	40
ariaLabel	string	-

Guidelines

Do

Use it inside MetricCard's #chart slot, under the value it illustrates - the card's label and value carry the meaning, the sparkline only shows the shape.
Return null from value for a missing point, same contract as TrendChart.
Pass a chart token (var(--color-chart-chart-1)) as color - it is a plain CSS color string, no computed-style lookup needed.

Don't

Don't use it where the reader needs to read a value off the chart - it has no axis, tooltip or legend. That is TrendChart's job.
Don't pass ariaLabel unless the sparkline says something the card's own text does not; by default it is decorative and hidden from assistive tech.