Raster

Raster is a small React chart library by Eeko Digital: LineChart, BarChart, DonutChart, ScatterChart, Sparkline, Gauge, LinearGauge, RadarChart and GeoChart.

Up to version 2 it was a design system. Version 3 keeps only the charts; see Migrating from v2.

Design goals

These goals decide what goes into raster and what stays out. Where a chart doesn’t meet one yet, the gap is listed.

Goal	Where it stands
Light. No feature bloat.	Zero runtime dependencies. Each chart is its own entry point, about 5–6 KB min+gzip including the shared accessibility layer (Sparkline about 2.3 KB, LineChart about 6.1 KB). GeoChart and its topojson-client peer live at @eekodigital/raster/geo, so the main entry never pulls them in. CI enforces a size budget per entry.
Themable enough for our apps.	Charts read a documented set of --raster-* custom properties, and every one has a fallback, so an unthemed chart is still legible. Per-series and per-datum color props override the theme. See Theming charts.
SVG, for accessibility and interactivity.	Each chart is a labelled figure with a generated summary, a visible data-table toggle, and SVG marks named like “Pass, Feb: 12, 2 of 6” that you reach with one Tab stop and arrow keys. See Accessibility.
Not based on d3.	Scales, ticks, curves and arcs come from raster’s own chart-math (about 260 lines).
TypeScript native.	Written in TypeScript; types ship with the package.
Responsive.	Every chart fills its container unless given a fixed size, and draws at display pixels. Cartesian charts take a height or an aspectRatio, sized in CSS so server-rendered and hydrated layouts match, and thin or rotate labels to fit.

If these goals don’t match yours, Compared with alternatives lists what else is out there.

Quick start

pnpm add @eekodigital/raster

// Once, at your app root:
import "@eekodigital/raster/styles.css";

// Anywhere:
import { LineChart } from "@eekodigital/raster";

<LineChart
  series={[{ name: "Visitors", data: [120, 180, 150, 240] }]}
  categories={["Mon", "Tue", "Wed", "Thu"]}
  title="Visitors this week"
/>;