PrismUI

Responsive SVG charts with explicit updates, accessible interactions, and CSS theming.

Version

v3.0.0

Size

12.3 KB gzip

Runtime support

Browser

Key exports

createLineChartcreateBarChartcreateAreaChartcreatePieChartcreateSparkline View all 18 exports

Works well with

refine orbit

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-create or mutate the Chart.js instance when data changes
});

// After — Prism, responsive SVG with an explicit update boundary
import { createLineChart } from '@vielzeug/prism';

const chart = createLineChart(document.getElementById('chart')!, {
  a11y: { ariaLabel: 'Users by day' },
  series: [
    {
      data: [
        { key: 1, value: 12 },
        { key: 2, value: 40 },
        { key: 3, value: 28 },
      ],
      name: 'Users',
    },
  ],
  tooltip: true,
});

chart.update([
  {
    data: [
      { key: 1, value: 12 },
      { key: 2, value: 40 },
      { key: 3, value: 28 },
      { key: 4, value: 65 },
    ],
    name: 'Users',
  },
]);

Feature	Prism	Chart.js	Lightweight Charts	D3
Bundle size	12.3 KB	~60 kB	~45 kB	~30 kB (core)
Zero dependencies	(Orbit)			(modular)
Renderer	SVG	Canvas	Canvas	SVG/Canvas
Data updates	Explicit update()	Instance mutation	Series mutation	Manual
CSS themeable			Limited
Framework-neutral
Accessible SVG				Manual
TypeScript-first		Partial		Types available

Use Prism when you need lightweight, framework-neutral charts with explicit updates and SVG output that can be styled with CSS. It fits dashboards, admin panels, and data-heavy applications.

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 '@vielzeug/prism/theme';

const chart = createLineChart(document.getElementById('chart')!, {
  a11y: { ariaLabel: 'Revenue by month' },
  series: [
    {
      color: '#3b82f6',
      data: [
        { key: 1, value: 10 },
        { key: 2, value: 25 },
        { key: 3, value: 18 },
        { key: 4, value: 32 },
      ],
      name: 'Revenue',
    },
  ],
  xAxis: { position: 'bottom' },
  yAxis: { position: 'left', grid: true },
  tooltip: true,
  crosshair: true,
  onHover: (event) => console.log(event?.datum),
});

// Update chart data explicitly
chart.update([
  {
    color: '#3b82f6',
    data: [{ key: 1, value: 10 }, { key: 2, value: 25 }, { key: 3, value: 18 }, { key: 4, value: 32 }, { key: 5, value: 28 }],
    name: 'Revenue',
  },
]);

// 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
• ChartHandle.update(data) — replace chart data synchronously without coupling to a state library
• seriesColor(index, override?) — resolve CSS palette color by series index
• setTheme(theme) / resetTheme() — apply or clear custom colors, font, and grid tokens at runtime
• Event hooks — onClick and onHover callbacks on every chart
• Devtools — debugChart() from @vielzeug/prism/devtools logs mount/resize/dispose to console.debug; tree-shaken from production unless imported
• 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	debugChart() — opt-in console.debug lifecycle logging, tree-shaken in production

Documentation

• Usage Guide
• API Reference
• Examples
• Migration Guide

See Also

• Refine — accessible web components that pair well with Prism for dashboards
• Orbit — floating element positioning for chart tooltips and popovers