Sparkline — ARC UI

Components

Sparkline

data

static

<arc-sparkline>

Overview

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 rich metric displays

When not to use

Use sparklines as the sole data representation for critical decisions — they lack axes, labels, and precision
Pass more than ~30 data points — the chart becomes an unreadable blob at small sizes
Rely on sparkline color alone to convey meaning; always include a text label or value nearby
Animate sparklines in a long list or table — the draw-in effect becomes distracting at scale; consider disabling animation via CSS
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: smooth 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 smooth fill transition
Configurable width, height, and color via props
Subtle baseline rule using --border-subtle for visual grounding
CSS parts (svg, line, area, bar) for external style overrides
Inline-block display with vertical-align: middle for seamless text-flow embedding
No external charting dependencies — pure SVG rendered by Lit
Aria-hidden SVG — decorative by design, pair with visible text for accessibility

Preview

Line

Line + Fill

Bar

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>
      <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

Prop	Type	Default	Description
`data`	`string`	`''`	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.
`type`	`'line' \| 'bar'`	`'line'`	Chart type. Line renders a polyline with optional area fill; bar renders evenly spaced rectangles.
`color`	`string`	`''`	CSS color override applied to strokes and fills. Accepts any valid CSS color value. Defaults to var(--accent-primary) when not set.
`width`	`number`	`120`	SVG viewport width in pixels.
`height`	`number`	`32`	SVG viewport height in pixels.
`fill`	`boolean`	`false`	When true and type is "line", fills the area beneath the curve with a semi-transparent accent color.

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

See Also

ARC UI

Arclight