Sparkline
Tiny inline SVG chart for embedding lightweight line or bar visualizations inside tables, stat cards, and dashboards. Renders from a simple comma-separated data string with no external charting dependencies.
<arc-sparkline>Overview
Sparkline is a miniature inline chart that shows a trend at a glance without a full charting library. Put it in a table cell next to a metric, pair it with a stat card, or place it in a dashboard grid, wherever a compact visual summary beats a wall of numbers.
The component accepts data as a plain comma-separated string, parses it into a normalized SVG path, and renders either a line or a series of bars depending on the type prop. Line mode draws a polyline with rounded joins and an optional filled area beneath the curve; bar mode renders evenly spaced rectangles that respond to hover with a fill transition.
A draw-in animation on the line type plays once on mount (respecting prefers-reduced-motion), with no JavaScript animation library. The component uses only CSS custom properties and SVG primitives, so the DOM stays light even when dozens of sparklines appear on a page.
Color defaults to var(--accent-primary) so the chart matches the rest of the design system. Override the color prop to use a custom CSS color value when you need a specific semantic color (e.g. green for revenue, red for error rate).
Guidelines
When to use
- Use sparklines alongside a numeric value to give context: "42 requests" with a trend line is more useful than either alone
- Keep data sets short (5-20 points) for clarity at small sizes
- Use the line type for continuous trends (revenue over time, request latency)
- Use the bar type for discrete comparisons (daily counts, category breakdowns)
- Set fill=true when you want to emphasize the magnitude of a trend, not just its direction
- Use the color prop to match semantic meaning (green for growth, red for errors) when context demands it
- Pair with Stat, AnimatedNumber, or Badge for metric displays
When not to use
- Do not use sparklines as the sole data representation for critical decisions: they lack axes, labels, and precision
- Do not pass more than ~30 data points: the chart becomes an unreadable blob at small sizes
- Do not rely on sparkline color alone to convey meaning; always include a text label or value nearby
- Do not animate sparklines in a long list or table: the draw-in effect becomes distracting at scale; consider disabling animation via CSS
- Do not use sparklines for interactive data exploration; reach for a full chart component when users need tooltips, zoom, or click-to-drill-down
Features
- Two chart types: line and evenly spaced bars
- Optional area fill beneath the line with semi-transparent accent color
- Draw-in stroke animation on mount (800ms, respects `prefers-reduced-motion`)
- Bar hover state with a fill transition
- Configurable width, height, and color via props
- Baseline rule using `--border-subtle`
- CSS parts (svg, line, area, bar) for external style overrides
- Inline-block display with vertical-align: middle so it sits inline in text
- No external charting dependencies: pure SVG rendered by Lit
- Aria-hidden SVG: decorative by design, pair with visible text for accessibility
Preview
Usage
<script type="module" src="@arclux/arc-ui"></script>
<!-- Line sparkline -->
<arc-sparkline data="10,25,18,30,22,35,28,40,32" type="line"></arc-sparkline>
<!-- Line with area fill -->
<arc-sparkline data="10,25,18,30,22,35,28,40,32" type="line" fill></arc-sparkline>
<!-- Bar sparkline -->
<arc-sparkline data="10,25,18,30,22,35,28,40,32" type="bar"></arc-sparkline>
<!-- Custom size and color -->
<arc-sparkline
data="5,12,8,20,15,25,18"
type="line"
width="200"
height="48"
color="var(--color-success)"
></arc-sparkline>import { Sparkline } from '@arclux/arc-ui-react';
export function MetricCard() {
return (
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
<span style={{ fontSize: 24, fontWeight: 600 }}>2,847</span>
<Sparkline data="10,25,18,30,22,35,28,40,32" type="line" fill />
</div>
);
}<script setup>
import { Sparkline } from '@arclux/arc-ui-vue';
</script>
<template>
<div style="display: flex; align-items: center; gap: 16px;">
<span style="font-size: 24px; font-weight: 600;">2,847</span>
<Sparkline data="10,25,18,30,22,35,28,40,32" type="line" fill />
</div>
</template><script>
import { Sparkline } from '@arclux/arc-ui-svelte';
</script>
<div style="display: flex; align-items: center; gap: 16px;">
<span style="font-size: 24px; font-weight: 600;">2,847</span>
<Sparkline data="10,25,18,30,22,35,28,40,32" type="line" fill />
</div>import { Component } from '@angular/core';
import { Sparkline } from '@arclux/arc-ui-angular';
@Component({
imports: [Sparkline],
template: `
<div style="display: flex; align-items: center; gap: 16px;">
<span style="font-size: 24px; font-weight: 600;">2,847</span>
<arc-sparkline data="10,25,18,30,22,35,28,40,32" type="line" fill />
</div>
`,
})
export class MetricCardComponent {}import { Sparkline } from '@arclux/arc-ui-solid';
export function MetricCard() {
return (
<div style={{ display: 'flex', 'align-items': 'center', gap: '16px' }}>
<span style={{ 'font-size': '24px', 'font-weight': '600' }}>2,847</span>
<Sparkline data="10,25,18,30,22,35,28,40,32" type="line" fill />
</div>
);
}import { Sparkline } from '@arclux/arc-ui-preact';
export function MetricCard() {
return (
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
<span style={{ fontSize: 24, fontWeight: 600 }}>2,847</span>
<Sparkline data="10,25,18,30,22,35,28,40,32" type="line" fill />
</div>
);
}API
datastring''- Comma-separated numeric values that define the chart data points (e.g. "10,25,18,30,22,35,28"). Parsed into a number array at render time. Non-numeric entries are silently dropped.
colorstring''- CSS color override applied to strokes and fills. Accepts any valid CSS color value. Defaults to var(--accent-primary) when not set.
type'line' | 'bar''line'- Chart type. Line renders a polyline with optional area fill; bar renders evenly spaced rectangles.
widthnumber120- SVG viewport width in pixels.
heightnumber32- SVG viewport height in pixels.
fillbooleanfalse- When true and type is "line", fills the area beneath the curve with a semi-transparent accent color.