Skip to main content

Sparkline

Sparkline

A small, axis-free trend drawn as lightweight SVG

Tags: chart sparkline trend inline kpi reporting

View Demo

The Sparkline draws a small, axis-free trend as plain SVG, with no ECharts instance, so it is cheap enough for table cells, list rows and stat cards. It stretches to its container's width by default and supports line, area and bar variants, gaps for missing values, a last-point marker and a reference line.

Svelte only (@classic-homes/charts-svelte); React support is pending.

Import​

<script>
  import { Sparkline } from '@classic-homes/charts-svelte';
</script>

Basic Usage​

<script>
  import { Sparkline } from '@classic-homes/charts-svelte';

  const weeklyClosings = [8, 11, 9, 14, 12, 15, 13, 17];
</script>

<Sparkline data={weeklyClosings} label="Weekly closings, last 8 weeks" />

Props​

Prop Type Default Description
data (number | null)[] required Values in order; null leaves a gap
variant 'line' | 'area' | 'bar' 'line' How the values are drawn
width number | string '100%' Width in pixels, or a CSS value
height number 32 Height in pixels
color string - Stroke/fill colour (defaults to the first chart colour, --chart-1)
showLastPoint boolean - Mark the last value with a dot (defaults to true for line and area, false for bar)
referenceLine number | 'average' - A dashed horizontal line, e.g. a target or the average
min number - Lower bound of the scale (defaults to the smallest value, or 0 for bars)
max number - Upper bound of the scale (defaults to the largest value)
label string - Accessible label; when omitted the sparkline is decorative and hidden from screen readers
class string - Custom CSS class

Data Structure​

type SparklineData = (number | null)[]; // null or non-finite values leave a gap

Examples​

Area with Average Line​

<Sparkline data={cycleDays} variant="area" referenceLine="average" height={40} />

Bars in a Table Cell​

<td>
  <Sparkline data={monthlyStarts} variant="bar" width={96} height={24} label="Monthly starts" />
</td>

Fixed Scale and Colour​

Pin the scale when several sparklines should be compared with each other.

{#each communities as community}
  <Sparkline data={community.occupancy} min={0} max={1} color="hsl(var(--success))" />
{/each}

Accessibility​

  • With label, the sparkline is an img with that aria-label; without it, it is hidden from assistive technology, so put the numbers in nearby text
  • Strokes keep their width at any size, and colour follows the theme in light and dark mode
  • No animation
On this page