PixelSparkline

Pure-SVG polyline trend chart that plots a series as a single stroke, with an optional filled area underneath — tone-aware and surface-aware.

  • Tone-aware stroke + area fill via retro-* token classes — matches the rest of the kit.
  • Three sizes (sm/md/lg) with auto-normalized [yMin..yMax] Y scale and even X spread.
  • Optional showArea fills the area beneath the line at 20% opacity for context.
  • Surface-aware: pixel uses crispEdges + square caps/miter joins, linear smooths to round.
  • Zero deps — pure SVG, SSR-safe, tree-shakable.
Status
stable
Category
data
Since
v1.9.0

API

import { PixelSparkline } from '@pxlkit/ui-kit';
PropTypeDefaultDescription
data (required)PixelChartDataPoint[]—The series. Points are spread evenly; x only labels them, and one whose y is not finite is left out.
tone'neutral' | 'green' | 'cyan' | 'gold' | 'red' | 'purple' | 'pink''cyan'Colour of the line and the area.
size'sm' | 'md' | 'lg''md'120×32, 240×60 or 360×96 px.
showAreabooleanfalseFills the area under the line, faintly.
surface'pixel' | 'linear'—Surface override; defaults to the nearest provider.
borderedbooleanfalseRender with surface-aware border + radius chrome. Defaults to false (no chrome).

Also takes the native attributes and event handlers of <svg> (SVGAttributes<SVGSVGElement>).

ref points to <svg>.

Accessibility

WCAG target: 2.1 AA

  • img

The SVG renders as role="img" with an auto-derived aria-label summarizing the trend (kind, point count and min..max range of its finite values — a point whose y is NaN or ±Infinity is left out of the chart and of the summary, which reads "sparkline, no data" when no value is finite). Pass a custom aria-label for richer narrative context. For full data accessibility, render a visually-hidden <table> sibling with sr-only that mirrors the data points — assistive tech then has a tabular fallback to read.

Usage

import { PixelSparkline } from '@pxlkit/ui-kit';

const sample = [
  { x: 'Mon', y: 12 },
  { x: 'Tue', y: 18 },
  { x: 'Wed', y: 9 },
  { x: 'Thu', y: 24 },
  { x: 'Fri', y: 16 },
  { x: 'Sat', y: 21 },
  { x: 'Sun', y: 14 },
];

export function Default() {
  return <PixelSparkline data={sample} />;
}

Examples

Default

import { PixelSparkline } from '@pxlkit/ui-kit';

const sample = [
  { x: 'Mon', y: 12 },
  { x: 'Tue', y: 18 },
  { x: 'Wed', y: 9 },
  { x: 'Thu', y: 24 },
  { x: 'Fri', y: 16 },
  { x: 'Sat', y: 21 },
  { x: 'Sun', y: 14 },
];

export function Default() {
  return <PixelSparkline data={sample} />;
}

Tones

import { PixelSparkline } from '@pxlkit/ui-kit';

const sample = [
  { x: 'Mon', y: 12 },
  { x: 'Tue', y: 18 },
  { x: 'Wed', y: 9 },
  { x: 'Thu', y: 24 },
  { x: 'Fri', y: 16 },
  { x: 'Sat', y: 21 },
  { x: 'Sun', y: 14 },
];

export function Tones() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <PixelSparkline data={sample} tone="cyan" />
      <PixelSparkline data={sample} tone="green" />
      <PixelSparkline data={sample} tone="gold" />
      <PixelSparkline data={sample} tone="red" />
      <PixelSparkline data={sample} tone="purple" />
      <PixelSparkline data={sample} tone="pink" />
    </div>
  );
}

Sizes

import { PixelSparkline } from '@pxlkit/ui-kit';

const sample = [
  { x: 'Mon', y: 12 },
  { x: 'Tue', y: 18 },
  { x: 'Wed', y: 9 },
  { x: 'Thu', y: 24 },
  { x: 'Fri', y: 16 },
  { x: 'Sat', y: 21 },
  { x: 'Sun', y: 14 },
];

export function Sizes() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <PixelSparkline data={sample} size="sm" tone="cyan" />
      <PixelSparkline data={sample} size="md" tone="cyan" />
      <PixelSparkline data={sample} size="lg" tone="cyan" />
    </div>
  );
}

With Area

import { PixelSparkline } from '@pxlkit/ui-kit';

const sample = [
  { x: 'Mon', y: 12 },
  { x: 'Tue', y: 18 },
  { x: 'Wed', y: 9 },
  { x: 'Thu', y: 24 },
  { x: 'Fri', y: 16 },
  { x: 'Sat', y: 21 },
  { x: 'Sun', y: 14 },
];

export function WithArea() {
  return <PixelSparkline data={sample} tone="green" showArea />;
}

Surfaces

import { PixelSparkline } from '@pxlkit/ui-kit';

const sample = [
  { x: 'Mon', y: 12 },
  { x: 'Tue', y: 18 },
  { x: 'Wed', y: 9 },
  { x: 'Thu', y: 24 },
  { x: 'Fri', y: 16 },
  { x: 'Sat', y: 21 },
  { x: 'Sun', y: 14 },
];

export function Surfaces() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <PixelSparkline data={sample} surface="pixel" tone="purple" />
      <PixelSparkline data={sample} surface="linear" tone="purple" />
    </div>
  );
}

Related