PixelAreaChart

Pure-SVG filled area chart that closes the trend polyline down to the baseline, with crisp pixel edges or smoothed linear joins.

  • Tone-aware stroke + fill via retro-* token classes — matches the rest of the kit.
  • Three sizes (sm/md/lg) with consistent inner padding and baseline math.
  • Surface-aware: pixel uses crispEdges + miter joins, linear can smooth via the smooth prop.
  • Polygon stays polygonal (no curves) so pixel surface remains pixel-perfect.
  • Auto-normalized [yMin..yMax] scale handles any numeric series.
Status
stable
Category
data
Since
v1.9.0

API

import { PixelAreaChart } 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 outline and the fill.
size'sm' | 'md' | 'lg''md'120×32, 240×60 or 360×96 px.
smoothbooleanfalseRounds the outline's joins (linear surface only).
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 series (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 "area chart, no data" when no value is finite). Pass a custom aria-label for richer 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 { PixelAreaChart } 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 <PixelAreaChart data={sample} />;
}

Examples

Default

import { PixelAreaChart } 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 <PixelAreaChart data={sample} />;
}

Tones

import { PixelAreaChart } 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-end gap-4">
      <PixelAreaChart data={sample} tone="cyan" />
      <PixelAreaChart data={sample} tone="green" />
      <PixelAreaChart data={sample} tone="gold" />
      <PixelAreaChart data={sample} tone="red" />
      <PixelAreaChart data={sample} tone="purple" />
      <PixelAreaChart data={sample} tone="pink" />
    </div>
  );
}

Sizes

import { PixelAreaChart } 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-end gap-4">
      <PixelAreaChart data={sample} size="sm" tone="cyan" />
      <PixelAreaChart data={sample} size="md" tone="cyan" />
      <PixelAreaChart data={sample} size="lg" tone="cyan" />
    </div>
  );
}

Smooth

import { PixelAreaChart } 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 Smooth() {
  return <PixelAreaChart data={sample} smooth tone="green" />;
}

Surfaces

import { PixelAreaChart } 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-end gap-4">
      <PixelAreaChart data={sample} surface="pixel" tone="purple" />
      <PixelAreaChart data={sample} surface="linear" tone="purple" />
    </div>
  );
}

Related