Native Web Components · SVG · Zero runtime dependencies

Sparkline Mini Charts

Ultra-lightweight, reactive, framework-agnostic micro data visualizations. Drop semantic SVG sparkline tags into any table, dashboard, card, or metric widget with 100% Shadow DOM encapsulation.

17 Native Web Components

0 Runtime Dependencies

< 3 kB Gzip Per Component

100% Shadow DOM & SSR Safe

⚡ Explore Live Streaming Studio 📊 Browse All 17 Components 🛠️ Open Sandbox

Installation & Quick Start

pnpm add sparkline-mini-charts

LIVE WEBSOCKET / POLLING STREAMING TICKER

Live Real-Time Streaming Studio (All 17 Charts)

Witness smooth SVG path morphing, synchronized point tracking, staggered bar physics, and authentic ThemeRiver organic flows in real time.

Live Market Ticker (10 Ticks) <mini-line-chart>

Server CPU Load (10 Ticks) <mini-area-chart>

Network I/O Variance (8 Ticks) <mini-bar-chart>

Traffic Share Distribution <mini-pie-chart>

Tier Subscription Split <mini-half-pie-chart>

Multi-Core Utilization (Rings) <mini-radial-bar-chart>

Task Completion Arc <mini-progress-chart>

Core Temperature Gauge <mini-gauge-chart>

Financial Asset Candlesticks (18 Candles) <mini-candlestick-chart>

Asset OHLC Tick Bars (18 Ticks) <mini-ohlc-chart>

Multi-Channel Resource Flow <mini-stacked-area-chart>

Authentic ThemeRiver Organic Flow <mini-stream-chart>

Volume vs Target Combo <mini-combo-chart>

Revenue KPI vs Target (Bullet) <mini-bullet-chart>

CI/CD Build History (Win/Loss) <mini-win-loss-chart>

52-Week Price Range (Range Bar) <mini-range-bar-chart>

Latency vs Throughput (Scatter) <mini-scatter-chart>

Components Catalog & Code Explorer

Explore all 17 primitives with uniform cards, multi-framework code snippets, and deep-dive documentation.

Category 01

Continuous Trends & Flow

Category 02

Signed & Categorical

Category 03

Radial & Proportions

Category 04

Gauges, Meters & Benchmarks

Category 05

Financial & 2D Coordinates

← Back to All Components

Component Name

<mini-chart>

Live Rendered Stage

Component Attributes

Ready-to-use Code:

Interactive Sandbox & Playground

Experiment with chart attributes, test custom datasets, and export ready-to-use markup.

Select Component:

JSON Data Array:

Accessible Label (aria-label):

Live Sandbox Preview:

Generated Markup:

Theming & Design Tokens Guide

Discover how to brand, customize, and integrate Sparkline Mini Charts with your Design System using CSS Custom Properties and Shadow Parts.

🧪 Interactive Theming Lab

Select a preset or tweak individual CSS tokens to see real-time 60fps cascading theme updates:

--mini-chart-color

--mini-chart-point-fill

--mini-chart-bullish-color

--mini-chart-bearish-color

--mini-chart-stroke-width 2px

--mini-chart-inactive-opacity 0.45

Trend Line with Endpoint <mini-line-chart>

Signed Bar Comparison <mini-bar-chart>

5-Slice Donut Distribution <mini-pie-chart donut="0.55">

Financial Candlestick <mini-candlestick-chart>

ThemeRiver Stream <mini-stream-chart>

Stephen Few KPI Bullet <mini-bullet-chart>

Generated CSS Token Snippet:

📦 Complete Design Tokens Master Snippet (Ready to Copy) Drop-in CSS

Copy and paste this master snippet into your global stylesheet (e.g. index.css, styles.css, or your Design System root). Simply replace the fallback values with your own CSS variables:

/* ==========================================================================
   Sparkline Mini Charts — Master Design Tokens & Theming Configuration
   Drop this into :root or any container class (e.g. .theme-dark, .my-dashboard)
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     1. Brand & Single-Series Base (Line, Bar, Area, Progress, Scatter)
     ------------------------------------------------------------------------ */
  --mini-chart-color: var(--brand-primary, #0ea5e9);            /* Main curve, bar fill, and accent */
  --mini-chart-point-fill: var(--brand-accent, #38bdf8);          /* Line endpoint & scatter dots */
  --mini-chart-point-stroke: #ffffff;                             /* Border on active/highlight dots */
  --mini-chart-aspect-ratio: auto;                                /* Override default 10/3 aspect ratio */

  /* ------------------------------------------------------------------------
     2. Multi-Series & Categorical Palette (Pie, Half-Pie, Stream, Stacked)
     Used sequentially for multi-layer data (1st slice, 2nd slice, etc.)
     Supports 1 to 8+ elements (wraps around automatically if > 8 items)
     ------------------------------------------------------------------------ */
  --mini-chart-color-1: var(--palette-1, #0ea5e9);              /* 1st slice / top stream layer */
  --mini-chart-color-2: var(--palette-2, #6366f1);              /* 2nd slice / layer */
  --mini-chart-color-3: var(--palette-3, #8b5cf6);              /* 3rd slice / layer */
  --mini-chart-color-4: var(--palette-4, #ec4899);              /* 4th slice / layer */
  --mini-chart-color-5: var(--palette-5, #f43f5e);              /* 5th slice / layer */
  --mini-chart-color-6: var(--palette-6, #f97316);              /* 6th slice / layer */
  --mini-chart-color-7: var(--palette-7, #eab308);              /* 7th slice / layer */
  --mini-chart-color-8: var(--palette-8, #10b981);              /* 8th slice / bottom layer */

  /* ------------------------------------------------------------------------
     3. Financial & Binary Status Tones (Candlestick, OHLC, Win/Loss)
     ------------------------------------------------------------------------ */
  --mini-chart-bullish-color: var(--brand-success, #10b981);    /* Bullish candles, win bars (+1) */
  --mini-chart-bearish-color: var(--brand-danger, #ef4444);     /* Bearish candles, loss bars (-1) */
  --mini-chart-tie-color: var(--brand-muted, #94a3b8);          /* Tie / neutral bars (0) */
  --mini-chart-wick-width: 0.75px;                              /* Precision stroke width for wicks */
  --mini-chart-tick-width: 0.75px;                              /* Tick mark width for OHLC bars */

  /* ------------------------------------------------------------------------
     4. Gauges, Progress & Benchmark KPIs (Gauge, Progress, Bullet)
     ------------------------------------------------------------------------ */
  --mini-chart-track-color: rgba(128, 128, 128, 0.15);          /* Background guide arc / track */
  --mini-chart-measure-color: var(--brand-primary, #0ea5e9);    /* Bullet actual performance bar */
  --mini-chart-target-color: var(--brand-danger, #ef4444);      /* Bullet KPI benchmark target line */
  --mini-chart-target-width: 2.5px;                             /* Bullet target marker width */
  --mini-chart-range-1: rgba(128, 128, 128, 0.10);             /* Bullet poor / low range band */
  --mini-chart-range-2: rgba(128, 128, 128, 0.18);             /* Bullet satisfactory range band */
  --mini-chart-range-3: rgba(128, 128, 128, 0.26);             /* Bullet good / optimal range band */

  /* ------------------------------------------------------------------------
     5. Interactivity, Dimming & Transitions (All Charts)
     ------------------------------------------------------------------------ */
  --mini-chart-inactive-opacity: 0.45;                          /* Non-hovered items dimming factor */
  --mini-chart-hover-brightness: 1.18;                          /* Active item highlight boost */
  --mini-chart-transition-duration: 0.4s;                       /* Path morphing & value change speed */
  --mini-chart-hover-duration: 0.2s;                            /* Pointer feedback transition speed */
  --mini-chart-stroke-width: 2px;                               /* Primary SVG stroke width */
  --mini-chart-bar-radius: 2px;                                 /* Rounded corners for bars */
}

The 4 Levels of Customization

1. Zero-Config (`currentColor`)

All single-series charts inherit their primary color from CSS color. When your theme switches or changes text color, the sparklines update automatically.

.metric-card.success {
  color: var(--brand-success); /* Chart inherits automatically! */
}

2. CSS Custom Properties (`--mini-chart-*`)

Map your Design System tokens directly to our standardized CSS properties at the root or container level.

:root {
  --mini-chart-color: var(--color-primary-500);
  --mini-chart-bullish-color: var(--color-emerald-500);
  --mini-chart-bearish-color: var(--color-rose-500);
}

3. Shadow Parts (`::part(...)`)

Target discrete SVG elements inside the Shadow DOM like ::part(line), ::part(point-last), or ::part(wick) for advanced design control.

mini-line-chart::part(point-last) {
  fill: var(--color-accent);
  stroke: #ffffff;
  stroke-width: 2px;
}

4. Motion & Performance Tuning

Control or disable transitions across entire dashboards for high-frequency streaming or accessibility compliance.

/* Instant high-frequency real-time update mode */
.high-frequency-table {
  --mini-chart-transition-duration: 0s;
  --mini-chart-hover-duration: 0.05s;
}

Complete Design Tokens Reference

CSS Custom Property	Default Fallback	Applies To	Description
`--mini-chart-color`	`#2563eb`	Line, Bar, Area, Combo, Progress, Scatter	Primary brand tone for paths, bars, and single-value fills.
`--mini-chart-color-1..8`	Built-in 8-Color Palette	Stream, Stacked Area, Pie, Radial Bar	Sequential palette for multi-layer/radial segments.
`--mini-chart-point-fill`	`currentColor`	Line, Scatter	Fill color for data endpoints and scatter points.
`--mini-chart-bullish-color`	`#10b981`	Candlestick, OHLC, Win/Loss	Color for positive/bullish trading periods and wins.
`--mini-chart-bearish-color`	`#ef4444`	Candlestick, OHLC, Win/Loss	Color for negative/bearish trading periods and losses.
`--mini-chart-track-color`	`rgba(128, 128, 128, 0.15)`	Progress, Gauge, Radial Bar	Background track arc color for circular meters.
`--mini-chart-stroke-width`	`2px` (or component default)	Line, Area, Gauge, Combo	Stroke width for lines and needle indicators.
`--mini-chart-inactive-opacity`	`0.45`	All interactive charts	Opacity applied to non-hovered items during hover focus.
`--mini-chart-transition-duration`	`0.4s`	All charts	Duration of path morphing and value transitions.

Gradients Studio & Multi-Stop Colors

v1.4.0 New Feature

Explore hardware-accelerated continuous SVG gradients and multi-stop chromatic transitions across Gauge, Progress, Radial Rings, Bullet, and Area sparklines.

🎨 Continuous Multi-Stop Color Lab

Select a chromatic preset or live-tweak stops to see real-time gradient rendering across all compatible charts:

Speedometer Gauge <mini-gauge-chart>

Smooth 6-color continuous arc with interactive pointer hover.

Progress Score Arc <mini-progress-chart>

Gradient along the stroke track with elastic spring animation.

Concentric Activity Rings <mini-radial-bar-chart>

Per-ring gradient transitions inspired by Apple Health activity rings.

Performance Bullet <mini-bullet-chart>

Intensity gradient fill along the performance measure bar.

Fintech Multi-Hue Area Trend <mini-area-chart>

Dual-stop & multi-color vertical opacity fade for modern dashboards.

HTML Declarative Syntax:

📚 Gradient Attributes Reference

Component	Attribute Syntax	Examples	Visual Outcome
`<mini-gauge-chart>`	`gradient="true \| ['#c1','#c2',...]"`	`gradient="true"`	Replaces segmented zones with a continuous smooth multi-stop arc gradient.
`<mini-progress-chart>`	`gradient="true \| ['#c1','#c2',...]"`	`gradient="['#3b82f6','#10b981']"`	Linear gradient mapped directly across the active progress stroke path.
`<mini-radial-bar-chart>`	`gradient="true \| [['#c1','#c2'],...]"`	`gradient="true"`	Generates individual radiant color shifts for each concentric activity ring.
`<mini-bullet-chart>`	`gradient="true \| ['#c1','#c2',...]"`	`gradient="['#8b5cf6','#ec4899']"`	Draws a horizontal chromatic fill across the measure bar `[part="measure"]`.
`<mini-area-chart>`	`gradient="true \| ['#c1','#c2',...]"`	`gradient="['#06b6d4','#8b5cf6']"`	Fills the area beneath the curve with multi-stop color stops and gradual vertical opacity falloff.

Framework Integrations

Standard Web Components work in any environment. Use native Custom Elements directly or via first-class typed wrappers.

Import the registration script once and use standard Custom Elements in your HTML.

<!-- Include registration bundle -->
<script type="module" src="https://cdn.jsdelivr.net/npm/sparkline-mini-charts/register"></script>

<!-- Use sparklines anywhere -->
<mini-line-chart 
  data="[18, 23, 20, 31, 27, 38, 44]" 
  curve="smooth" 
  trend-color="auto" 
  label="Weekly revenue trend"
></mini-line-chart>

First-class React components with full TypeScript prop typings and event listeners.

import { MiniLineChart, MiniGaugeChart, MiniProgressChart } from 'sparkline-mini-charts/react';

export function MetricsWidget() {
  const weeklyData = [18, 23, 20, 31, 27, 38, 44];

  return (
    <div className="metric-card">
      <span>Revenue Trend</span>
      <MiniLineChart 
        data={weeklyData} 
        curve="smooth" 
        trend-color="auto" 
        interactive
        onPointerEnter={(e) => console.log('Hovering line chart', e)}
        label="Revenue trend" 
      />

      <!-- Gauge with Continuous Multi-Stop Gradient -->
      <MiniGaugeChart
        data={[72, 0, 100]}
        gradient={['#10b981', '#f59e0b', '#ef4444']}
        interactive
      />
    </div>
  );
}

Typed Vue 3 Composition API components with full attribute forwarding and `@sparkline-hover` events.

<script setup lang="ts">
import { MiniLineChart, MiniProgressChart } from 'sparkline-mini-charts/vue';

const revenueData = [18, 23, 20, 31, 27, 38, 44];
const onHover = (event: CustomEvent) => {
  console.log('Hovered chart payload:', event.detail);
};
</script>

<template>
  <div class="metric-card">
    <MiniLineChart 
      :data="revenueData" 
      curve="smooth" 
      trend-color="auto" 
      interactive
      @sparkline-hover="onHover"
      label="Revenue trend" 
    />

    <!-- Progress with Stroke Gradient -->
    <MiniProgressChart
      :data="[84]"
      :gradient="['#3b82f6', '#06b6d4', '#10b981']"
      show-value
      unit="%"
      interactive
    />
  </div>
</template>

Modern Angular 22+ standalone Signal directives from sparkline-mini-charts/angular (100% zoneless-ready, native input() & output()).

import { Component, signal } from '@angular/core';
import { MiniLineChartDirective, MiniGaugeChartDirective, SPARKLINE_DIRECTIVES } from 'sparkline-mini-charts/angular';

@Component({
  selector: 'app-metric-card',
  standalone: true,
  imports: [MiniLineChartDirective, MiniGaugeChartDirective], // or imports: [SPARKLINE_DIRECTIVES]
  template: `
    <mini-line-chart 
      [data]="data()" 
      curve="smooth" 
      trend-color="auto" 
      interactive
      (sparklineHover)="onHover($event)"
      label="Revenue trend">
    </mini-line-chart>

    <!-- Gauge with Reactive Signal Gradient & Zone Change Output -->
    <mini-gauge-chart
      [data]="gaugeValue()"
      [gradient]="['#10b981', '#f59e0b', '#ef4444']"
      interactive
      (zoneChange)="onZoneChange($event)">
    </mini-gauge-chart>
  `
})
export class MetricCardComponent {
  readonly data = signal([18, 23, 20, 31, 27, 38, 44]);
  readonly gaugeValue = signal([75, 0, 100]);

  onHover(event: CustomEvent) {
    console.log('Hover point:', event.detail);
  }

  onZoneChange(event: CustomEvent) {
    console.log('Zone changed:', event.detail);
  }
}

Direct Custom Element usage in Svelte without wrappers.

<script>
  import 'sparkline-mini-charts/register';
  let data = [18, 23, 20, 31, 27, 38, 44];
</script>

<mini-line-chart 
  data={JSON.stringify(data)} 
  label="Weekly Revenue">
</mini-line-chart>