boardplot/boardplot

Boardplot is a chart library for AI agents and React apps: one JSON spec gives a consulting-grade business chart for reports, dashboards and slides, as SVG, PNG or a React component.
Gallery · Manual · Chart reference · AI agents · React · Changelog · Apache-2.0
This stacked column chart is one JSON spec drawn by boardplot render; the variance to the prior year above each column is computed from the data. Boardplot has 37 chart types, 82 variants and 564 example specs ; the gallery shows each type with its spec.
## Why Boardplot
Business notation is built in: actual against plan and prior year, variances, bridges, event lanes and forecasts. Totals, shares and growth rates are computed from your data, and each render reports the numbers it derived.
Automatic label placement: one collision solver places the labels, and a render reports every label it left out. A chart that cannot fit is refused with the size it needs.
The same spec, settings and engine version give byte-identical SVG.
One spec, { "type", "data", "options" }, works in React, the CLI and six MCP tools. A spec error comes back as JSON with the path, the expected value and a fix, so an agent can repair the spec.
## Match your design system
Set brand colours, series colours, type sizes and spacing through theme tokens, or start from one of eight presets.
Style tables with the same tokens, or start from the ready table look.
Use your own font: boardplot fonts build makes the width tables that layout measures with. The font files must be loaded where the chart is shown, and installed where a PNG is drawn.
Choose the locale, the number formats and the reading target: report, dashboard, slide or print.
The theme reference lists every token.
## Examples
Each chart links to its spec in the gallery. Companies, products, sources and numbers in the examples are invented.
## Quick start
Boardplot needs Node.js 22.12 or newer.
sh
npm install boardplot
cat > revenue.json ;
Each chart type has its own entry, such as boardplot/react/column. BoardplotChart from boardplot/react/spec takes a whole spec instead. The React route, in order: Getting a chart in React, Rows in React for query rows, Container sizing, Theme provider and Export, which ends with a complete typed PNG and SVG download.
## The catalog
37 chart types, 82 variants and 564 example specs. fixtures.md lists every example spec.
| Type | Aliases | Summary |
| column | | Vertical bars, grouped or stacked |
| bar | | Horizontal bars per item |
| line | profile | Lines and areas over time |
| dimswitch | dim-switch-table, dim-switch | KPIs by one dimension and period, from sums |
| table | tbl | Management table with totals |
| waterfall | bridge | Bridge |
| kpi | | Single-metric card |
| combo | | Columns with line or area overlays |
| variance | deviation | Variance tier against PY, PL or FC |
| bullet | | KPI rows with bands and target |
| bartable | bar-table, table-bars | Table rows with stacked bars, one panel per measure |
| pvm | price-volume-mix | Price, volume and mix bridge |