Optizon Charts

WebGL charts for Optizon UI: bar, line, area, scatter, combo, histogram, box plot, waterfall, bullet, candlestick, pie, ring, heatmap, calendar heatmap, funnel, radar, Sankey, treemap, sunburst, Gantt, packet, Venn and journey charts, sparklines and stat tiles, plus <Chart> for any spec. Charts read your own rows through typed fields, stay keyboard and screen-reader accessible (every chart has a data table), and draw crisply at any device pixel ratio.

Use

Install it next to @optizon/ui and @optizon/tokens, at the same version, with React 19 and Tailwind CSS 4 (4.1.14 or later; ^4.1 installs the newest 4.x release). Keep @tailwindcss/vite on the same version as tailwindcss: its Vite peer range decides which Vite works (Vite 8 needs 4.2.2 or later):

npm install @optizon/[email protected] @optizon/[email protected] @optizon/[email protected] react@^19 react-dom@^19
npm install -D tailwindcss@^4.1 @tailwindcss/vite@^4.1

In your application stylesheet, scan both packages' source (paths are relative to the stylesheet):

@import "@optizon/tokens";
@source "../node_modules/@optizon/ui/src";
@source "../node_modules/@optizon/charts/src";

Without the second @source line, charts render unstyled.

ChartTone uses the shared UI palette: primary, info (sky), success (emerald), warning (amber), and danger (rose). Use tone="info" for an informational series, or seriesStyles[key].tone for an individual series. Reference lines, bands, quadrant tones, and waterfall tones accept the same palette. Colors follow UIProvider theme changes.

import { UIProvider } from "@optizon/ui";
import { BarChart, chartField } from "@optizon/charts";

type Month = { month: string; revenue: number };
const month = chartField<Month>();
const fields = [
  month({ id: "month", label: "Month", type: "ordinal", accessor: (row) => row.month }),
  month({ id: "revenue", label: "Revenue", type: "quantitative", currency: "USD", accessor: (row) => row.revenue }),
];
const rows: Month[] = [{ month: "Jan", revenue: 12400 }, { month: "Feb", revenue: 15100 }, { month: "Mar", revenue: 13900 }];

<UIProvider><BarChart title="Revenue" data={rows} fields={fields} x="month" y="revenue" /></UIProvider>;

Charts render inside UIProvider from @optizon/ui, which sets the theme, locale and time zone. The package is ESM-only, ships compiled JavaScript, TypeScript declarations and source, and has @optizon/ui, @optizon/tokens (same version) and React 19 as peers. Each chart only brings the code it draws with, so importing one preset keeps a bundle small. Licensed under Apache-2.0.

The agent skill for Codex and Claude Code ships in @optizon/ui and covers charts too: npx @optizon/[email protected] install-skill.

Documentation, examples and source: https://github.com/optzn/ui