PrismUI

Reactive SVG charting library — line, bar, and area charts. Signal-driven updates, CSS-themeable, accessible.

v0.0.111.0 KB gzip Browser

createLineChartcreateBarChartcreateAreaChartcreatePieChartcreateSparklinelinearScaletimeScalebandScale +15 more →

ripplesigilorbit

Why Prism?

Charting libraries typically require a framework binding, bundle heavy dependencies, or force canvas rendering that can't be styled with CSS. Prism takes a different approach:

// Before — Chart.js, imperative setup with a canvas you can't CSS-theme
import Chart from 'chart.js/auto';
const ctx = document.getElementById('myChart') as HTMLCanvasElement;
new Chart(ctx, {
  type: 'line',
  data: { labels, datasets: [{ data: values }] },
  // re-render manually when data changes, no signals, canvas not CSS-styleable
});

// After — Prism, declarative SVG chart driven by a signal
import { createLineChart } from '@vielzeug/prism';
import { signal } from '@vielzeug/ripple';

const data = signal([
  { key: 1, value: 12 },
  { key: 2, value: 40 },
  { key: 3, value: 28 },
]);
const chart = createLineChart(document.getElementById('chart')!, {
  series: [{ name: 'Users', data }],
  tooltip: true,
});
// chart auto-updates when data.value changes — no manual re-render
data.value = [...data.value, { key: 4, value: 65 }];

Feature	Prism	Chart.js	Lightweight Charts	D3
Bundle size	~8 kB	~60 kB	~45 kB	~30 kB (core)
Renderer	SVG	Canvas	Canvas	SVG/Canvas
Zero external deps
CSS themeable			Limited
Reactive (signals)
Accessible SVG				Manual
TypeScript-first		Partial		Types available

Use Prism when you need lightweight, reactive charts that integrate with signal-based state and can be styled purely with CSS. Ideal for dashboards, admin panels, and data-heavy applications using Vielzeug.

Consider alternatives when you need 50+ chart types (ECharts), financial trading charts (Lightweight Charts), or low-level visualization grammar (D3).

Installation

pnpm

pnpm add @vielzeug/prism

npm

npm install @vielzeug/prism

yarn

yarn add @vielzeug/prism

Quick Start

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

const data = signal([
  { key: 1, value: 10 },
  { key: 2, value: 25 },
  { key: 3, value: 18 },
  { key: 4, value: 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?.datum),
});

// Update data → chart re-renders automatically
data.value = [...data.value, { key: 5, value: 28 }];

// Cleanup when done
chart.dispose();

Features

• createLineChart(container, config) — line chart with linear, monotone, or step interpolation
• createBarChart(container, config) — bar chart with four layout variants: grouped, stacked, grouped-horizontal, stacked-horizontal
• createAreaChart(container, config) — filled area with configurable opacity
• createSparkline(container, config) — minimal inline sparkline (line, area, or bar variant)
• createPieChart(container, config) — pie, donut, or semi-circle donut chart
• linearScale(config) — continuous numeric scale with nice tick generation
• timeScale(config) — date/time scale with interval-based ticks
• bandScale(config) — categorical scale for bar charts
• MaybeSignal<T> — pass plain values or reactive signals; both work seamlessly
• seriesColor(index, override?) — resolve CSS palette color by series index
• setTheme(theme) — apply custom colors, font, and grid tokens at runtime
• buildXScale / buildYScale — shared cartesian scale builders (auto-select time or linear scale)
• Event hooks — onClick and onHover callbacks on every chart
• Plugin system — extend charts with ChartPlugin (install/destroy lifecycle); supported by all chart types including createPieChart
• Devtools — warn / issue from @vielzeug/prism/devtools; silenced automatically in production
• CSS custom properties — full theme control via --prism-* tokens
• Responsive — auto-resizes via ResizeObserver
• Accessible — ARIA labels and semantic SVG structure
• Symbol.dispose — explicit resource management following TC39 proposal

Sub-paths

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

Documentation

• Usage Guide
• API Reference
• Examples

See Also

• Ripple — reactive signals that power Prism's auto-updating charts
• Sigil — accessible web components that pair well with Prism for dashboards
• Orbit — floating element positioning for chart tooltips and popovers