Charts

Composable SVG & canvas data visualizations engineered for OKLCH tokens

High-performance, modular charting library with zero heavy bundle overhead and instant dark mode color transitions.

Interactive Preview

Quickstart

1. Framework-Agnostic Core (@nofinite/charts)

Mount directly to any DOM element without React. Works in Vanilla JavaScript, TypeScript, Vue 3, Svelte 5, SolidJS, or backend Node.js:

import { Chart, renderChart } from '@nofinite/charts';
import '@nofinite/nuicss/styles.css';

const container = document.getElementById('chart')!;

// Method A: State-managed, responsive interactive instance
const chart = new Chart({
  element: container,
  variant: 'area', // 'area' | 'line' | 'bar' | 'pie' | 'donut' | 'scatter'
  data: [
    { date: '2026-01-01', value: 42 },
    { date: '2026-02-01', value: 58 },
    { date: '2026-03-01', value: 74 },
  ],
  height: 280,
  showGrid: true,
  showAxes: true,
  showTooltip: true,
});

// Method B: Pure isomorphic SVG HTML generator (zero DOM required)
const svgHtml = renderChart({
  variant: 'area',
  data: [{ x: 1, y: 10 }, { x: 2, y: 25 }],
  width: 600,
  height: 300,
});

2. React Adapter (@nofinite/charts/react)

Declarative JSX components for React 18 & 19 applications:

import React from 'react';
import { AreaChart } from '@nofinite/charts/react';
import '@nofinite/nuicss/styles.css';

const metrics = [
  { time: '00:00', latency: 42 },
  { time: '04:00', latency: 38 },
  { time: '08:00', latency: 45 },
  { time: '12:00', latency: 68 },
  { time: '16:00', latency: 52 },
  { time: '20:00', latency: 31 },
];

export function LatencyChart() {
  return (
    <div className="w-full h-64 p-5 border border-default rounded-2xl bg-surface">
      <AreaChart
        data={metrics}
        xAccessor={(d) => d.time}
        yAccessor={(d) => d.latency}
        strokeColor="var(--color-primary)"
        showTooltip={true}
      />
    </div>
  );
}

Architectural Invariants

• Universal Framework-Agnostic Core: Zero React dependency required. The root export (@nofinite/charts) provides class-based DOM mounting, D3 math, downsampling, and SVG path generation. React (@nofinite/charts/react) is an optional adapter.
• Precision D3 Mathematical Engine: Built on precision D3 algorithms (d3-shape, d3-scale, d3-array) with native SVG rendering and zero virtual DOM rendering bottlenecks.
• Zero Downstream CSS Invariant: All chart containers, frosted glass popovers, and animated keyframes are bundled directly into NUICSS. You only ever need a single stylesheet import (import '@nofinite/nuicss/styles.css').
• OKLCH Perceptual Theming: Automatically synchronizes with your active NUICSS palette (var(--color-primary), var(--color-success), var(--color-warning), var(--color-danger)) with 0ms light/dark mode reactivity.
• High-Frequency Downsampling: Built-in Largest Triangle Three Buckets (downsampleLTTB) downsamples 100,000+ points to preserve 60 FPS fluidity.

Supported Visualizations

Documentation Directory

Advanced Architecture & Deep Guides

• Vanilla Core & Math Engine — Pure D3 vector path generators, DOM mounting API, and Largest Triangle Three Buckets (downsampleLTTB) downsampling.
• Multi-Series Visualizations — Multi-series area charts, grouped/stacked bars, and multi-scatter plots on shared scales.
• Sparklines & Micro-Charts — Minimalist trendlines for KPI cards and data table rows.
• Theming & Glassmorphism — OKLCH palettes, frosted glass popovers (backdrop-blur-xl), and dark mode switching.
• Accessibility (A11y) Standards — Screen reader support, automated data table generation (generateA11yTable), and keyboard navigation.
• Exporting Charts — Exporting SVG charts to PNG or standalone vector files.
• Production Examples — SaaS Revenue Dashboard, Financial KPI Grid, and High-Density Telemetry.
• Installation & Setup — Package installation, peer dependencies, and styling configuration.

Visualizations Catalog

• AreaChart — Quantitative volume progression with smooth Bézier curves and gradient fills.
• BarChart — Categorical data distributions, stacked bars, and hover highlights.
• LineChart — Multi-series trend monitoring with interactive marker points.
• PieChart & DonutChart — Radial distributions and central summary callouts.
• ScatterChart — Two-dimensional coordinate projections and metric correlations.
• ChartLegend — Interactive series toggles and categorical color keys.