@vielzeug/prism

Reactive SVG charting library — line, bar, area, pie, and sparkline charts. Zero external dependencies, signal-driven updates.

Package: @vielzeug/prism  ·  Category: UI / Visualization

Key exports: createLineChart, createBarChart, createAreaChart, createPieChart, createSparkline, linearScale, timeScale, bandScale, seriesColor, setTheme

When to use: Data visualization with reactive charts that auto-update when signal-based data sources change. Renders accessible SVG, themeable via CSS custom properties.

Related: @vielzeug/ripple · @vielzeug/refine · @vielzeug/orbit

@vielzeug/prism is part of Vielzeug. It depends on @vielzeug/ripple for reactivity and ships as a TypeScript package with ESM+CJS output.

Installation

# pnpm
pnpm add @vielzeug/prism
# npm
npm install @vielzeug/prism
# yarn
yarn add @vielzeug/prism

Sub-paths

| Import | Purpose | | -------------------------- | -------------------------------------------------------------- | | @vielzeug/prism | Chart factories, scales, and types | | @vielzeug/prism/theme | Default CSS custom properties (light + dark mode) | | @vielzeug/prism/devtools | warn / issue helpers (dev-only, tree-shaken in production) |

Quick Start

import { createLineChart, setTheme } from '@vielzeug/prism';
import { signal } from '@vielzeug/ripple';
import '@vielzeug/prism/theme';

// Optional: apply a custom color palette at startup
setTheme({ colors: ['#6366f1', '#22d3ee', '#f59e0b', '#10b981'] });

const data = signal([
  { x: 1, y: 10 },
  { x: 2, y: 25 },
  { x: 3, y: 18 },
  { x: 4, y: 32 },
]);

const chart = createLineChart(document.getElementById('chart')!, {
  series: [{ name: 'Revenue', data, color: '#3b82f6' }],
  xAxis: { position: 'bottom' },
  yAxis: { position: 'left', grid: true },
  tooltip: true,
  crosshair: true,
  onHover: (event) => console.log(event?.point),
});

// Data updates → chart re-renders automatically
data.value = [...data.value, { x: 5, y: 28 }];

// Cleanup (also works with TC39 `using` declarations)
chart.dispose();

Documentation

• Overview
• Usage Guide
• API Reference
• Examples

License

MIT © Helmuth Saatkamp — part of the Vielzeug monorepo.