Every chart, drawn on the server
Seventy chart forms for React. Server-rendered SVG with zero dependencies, sized in CSS pixels, and themed by CSS tokens.
Illustrative data. Mean tokens per response, eval every 1k steps.
In the package
Rendered on the server
Every form is a pure function that returns SVG. No hooks and no browser APIs, so it renders in a Server Component as is.
import { Line } from "diagrammatic"
Drawn in CSS pixels
A figure renders at its width and inherits the page font, so its 11px tick labels are the same 11px as your captions.
width, aspect, fontSize, <Fit>
Themed by tokens
Seven validated categorical hues, a diverging pair, and ink are CSS variables. A shadcn/ui app imports one stylesheet.
--dg-*, diagrammatic/shadcn.css
Interaction on the wrapper
Tooltips, hover highlight, clicks, and zoom live in one client entry that wraps server charts and reads the marks they stamp.
diagrammatic/interactive
Charts a model can write
A serializable spec covers the forms in the main entry. Validate the model's JSON and one component draws it.
validateSpec(), <Chart spec>
Geography in its own entry
A world map and a dot world map ship separately, so only the pages that draw a map load its geometry.
diagrammatic/world
Every form, by the question it answers
Each plate is the form drawn at a small width. Open one to read its full figure, the case it was built for, and its props.
Change over time
Trends, rhythms, and histories. The x axis is time; everything else is a choice.
Comparison
Magnitude across categories: which is bigger, and by how much.
Part to whole
Composition: how a total divides, in slices, cells, and nested area.
Distribution
The shape of the data: spread, skew, clusters, and outliers.
Correlation & multivariate
How measures move together, and profiles across many dimensions at once.
Deviation
Signed difference from a reference: zero, neutral, or a target.
Flow
Quantities in motion between states, stages, and totals.
Networks & hierarchy
Structure itself: what connects to what, and what contains what.
Spatial
Values placed on geography, drawn here on an abstract tile map.
Micro
Charts the size of a word, built to live inside tables, tiles, and sentences.