Boardplot

Boardplot draws consulting-grade charts and management tables for business work: slides, reports and dashboards. Its chart types include waterfalls, Mekko (Marimekko) charts and variance charts. It is free and open source under Apache-2.0.

Give an AI agent such as Claude Code or Codex your data and say what the chart should show. Boardplot runs on your computer and needs Node.js 22.12 or newer. Your agent may need a paid plan. In PowerPoint a chart is a picture, so to change it you ask the agent to draw it again.

Developers can add the same charts to a React dashboard as responsive components with tooltips.

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, 83 variants and 683 example specs; the gallery shows each type with its spec.

Who it is for

• People who build decks and reports. Get the waterfalls, Mekko charts and variance charts of a board deck as images for PowerPoint, Keynote or Word. Boardplot needs no licence fee or add-in. See PowerPoint or Keynote deck.
• Business people who work with an AI agent. The agent writes the chart spec, so you write no code. You need a local agent, such as Claude Code or Codex, and Node.js 22.12 or newer. The chart tools run on your computer. Claude on the web or a phone reaches them only through Claude Code Remote Control. Ask your IT team if you cannot install software. See AI agents for the setup and Use cases for example prompts.
• Developers who build dashboards. The React components are responsive, with tooltips, click handlers for drill-down, zoom on time-based line and area charts, and sortable, foldable tables. See React.

Limits

In PowerPoint a chart is a picture, so colleagues cannot edit its data there. If your team edits chart numbers on the slide, use a PowerPoint add-in. Charts do not animate their drawing or data updates.

How it compares

Apache ECharts is a widely used general-purpose chart library for interactive web apps. Boardplot draws consulting-grade business charts for slides, reports and dashboards. The two can work side by side.

Sources checked 7 November 2026: ECharts features, waterfall charts, server rendering, animation and the ECharts MCP server. Boardplot is not affiliated with Apache ECharts.

	Boardplot	Apache ECharts
Made for	Business charts for slides, reports and management dashboards	Interactive charts in web apps, including very large data sets
Where it runs	In Node.js through an AI agent, the CLI or JavaScript, and in React apps	In the browser and on a Node.js server
Output	SVG, PNG and React components	Canvas or SVG in the browser, SVG or PNG files in the browser or on a server
Software price	Free, Apache-2.0	Free, Apache-2.0
Waterfall	Built in, totals computed from the data	Drawn with stacked bars, as its handbook shows
Mekko	Built in	Can be drawn with a custom series
AI agents	MCP server and CLI included	An example MCP server from Apache ECharts, and community MCP servers
Interaction	Tooltips, click handlers for drill-down, zoom in time-based line and area charts, and sortable tables in React	Zoom, brush selection, legends and tooltips built in
Animation	No animation of chart drawing or data updates. Transitions in React tables and story steps	Built in, also for data updates

Choose ECharts for interactive web charts, large data sets, animation or streaming. Choose Boardplot for consulting-grade business charts with built-in actual, plan and forecast notation for slides, reports and dashboards.

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 ten presets. Bridge is the default.
• 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.

npm install boardplot
cat > revenue.json <<'EOF'
{
  "name": "revenue",
  "type": "column",
  "data": {
    "categories": ["2024", "2025"],
    "series": [{ "id": "revenue", "label": "Revenue", "values": [120, 135] }]
  },
  "options": { "title": "Revenue grew 12.5 percent", "subtitle": { "measure": "Revenue" }, "unit": "$m" }
}
EOF
npx boardplot render revenue.json --out charts

This writes charts/revenue.svg and prints the result as JSON. Add --format png for a PNG. npx boardplot list shows every chart type, and npx boardplot fixtures --type waterfall prints complete example specs. To draw several charts in one call, which starts the CLI once, send { "version": 1, "charts": [...] } with a name per chart; see Several charts in one call.

The package has ES module entries only (import, not require). A new npm init project is CommonJS, so run npm pkg set type=module before a server-side script imports Boardplot.

Boardplot is at 0.x: defaults and output can change between minor versions, and options can be renamed or removed. A spec with a retired setting still draws and warns: a renamed setting maps to its successor, and a removed setting is ignored. A setting that never existed is refused. CHANGELOG.md lists each change.

AI agents

For Claude Code and Codex, install the plugin. It adds the MCP server and a chart skill. This repository is its marketplace:

claude plugin marketplace add boardplot/boardplot
claude plugin install boardplot@boardplot

codex plugin marketplace add boardplot/boardplot
codex plugin add boardplot@boardplot

The plugin installs the npm package at its own version into a Boardplot cache folder, so PNG works without a browser. For a machine without npm registry access, each release also has an offline ZIP with the runtime bundled; that route needs Chrome or Chromium for PNG. See the plugin README.

Any other MCP client: install the package globally once, then add the stdio server boardplot-mcp. It has six tools: boardplot_list, boardplot_describe, boardplot_fixtures, boardplot_measure, boardplot_render and boardplot_feedback. With a global install, npm does not run in the folder the agent works in, so that folder's npm settings cannot change which package runs. Run the same command again to update.

npm install -g boardplot

{
  "mcpServers": {
    "boardplot": { "command": "boardplot-mcp" }
  }
}

Claude Code and Codex also take the server without the plugin: claude mcp add boardplot -- boardplot-mcp or codex mcp add boardplot -- boardplot-mcp.

Then ask for a chart, for example "Use Boardplot to draw an EBIT bridge from this data". An agent with a valid spec can render it directly. For an unfamiliar type, boardplot_describe returns a starter spec and the accepted fields. Use boardplot_list when choosing a type, or boardplot_fixtures for examples. boardplot_measure helps fit a constrained container. Read the render's warnings and actual output format before placing the chart. MCP examples show the calls. llms.txt indexes the full reference.

React

React 18 or 19 is a peer dependency.

npm install boardplot react react-dom

import { ColumnChart } from 'boardplot/react/column';

const data = {
  categories: [{ id: '2024', label: '2024' }, { id: '2025', label: '2025' }],
  series: [{ id: 'revenue', label: 'Revenue', values: [120, 135] }],
};

export function Revenue() {
  return <ColumnChart data={data} title="Revenue grew 12.5 percent" unit="$m" size="container" fit="content" />;
}

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, 83 variants and 683 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
pie	doughnut, donut	Pie or doughnut of shares
status		Entity by period state matrix
heatmap	matrix	Row by column matrix
gantt	timeline	Timeline with spans and events
scatter	bubble	XY/bubble
funnel		Stage funnel with conversion rates
pareto	pareto-chart	Sorted columns with cumulative curve
mekko	marimekko, bar-mekko	Variable-width stacked columns
sparkline		One series as a mini line
treemap	voronoi-treemap	Part of a whole as nested areas
sankey		Flows from sources to targets in stages
grid	facets	Facets and metric stacks on one category axis
slope		Two-point slope lines
dot	cleveland, dumbbell, lollipop	Dots, dumbbells or lollipops
cohort	retention	Retention by cohort and period
choropleth		Region map coloured by value
butterfly		Two mirrored bar panes
likert	diverging-stacked	Diverging bars for survey scales
histogram	distribution, frequency	Equal-width bins of raw values
box	boxplot, box-and-whisker	Box plots of raw observations
waffle		Share of a whole as a grid of cells
pyramid	age-pyramid, population-pyramid	Mirrored bands on one scale
diagram		Node and edge diagrams, including system architecture
tilemap		Equal-size region tiles
creative		Ad-creative review card (early alpha)

Documentation

• Gallery: one drawn example of each chart type, with its spec
• Use cases: prompts and steps for a slide deck, an analysis page, a React dashboard, a Word report or a weekly report built by an AI agent
• The manual: the spec, the MCP tools, the CLI, React, sizing, errors and themes
• Chart reference: one page per chart type, plus options, themes, React and fixtures
• llms.txt: an index of the manual and the reference for language models

Development

npm ci
npm run typecheck
npm test
npm run build

npm run docs:build regenerates docs/reference, the gallery, llms.txt and the catalog table above. CONTRIBUTING.md and AGENTS.md have the rules for a pull request. SECURITY.md says how to report a security problem.

License

Apache-2.0. See LICENSE and NOTICE.md.