Add your data, watch it move

36 React charts in pure SVG. Tooltips, keyboard navigation and a screen reader table come built in.

View gallery · Get started

MIT license · React 18+ · Zero dependencies

36 charts, all in the same card

• Proportion: Pie chart, Donut chart, Waffle chart, Marimekko chart, Segmented bar
• Trend: Line chart, Area chart, Streamgraph, Sparkline, Calendar heatmap, Bump chart, Candlestick chart, Skyline
• Comparison: Waterfall chart, Pareto chart, Radar chart, Bar chart, Slope chart, Dumbbell chart, Lollipop chart
• Distribution: Beeswarm, Ridgeline, Box / violin plot, Histogram
• Relationship: Heatmap, Bubble chart, Parallel coordinates, Scatter plot
• Flow: Funnel chart, Sankey diagram, Chord diagram
• Hierarchy: Treemap, Sunburst
• KPI: Radial bar chart, Gauge, Bullet chart

One chart, three ways to render it

Use a React component directly, or write one JSON spec and get the same chart from the CLI and AI agents.

Install only what you need

All three are MIT licensed. The CLI and MCP server read the same spec as the React library.

• ztd-charts: Charts, the card frame, themes and data helpers for React 18 and up. npm i ztd-charts Install docs
• ztd-charts-cli: Validates specs and renders them to image files in the terminal and CI. npx ztd-charts-cli list CLI docs
• ztd-charts-mcp: A stdio MCP server that lets AI agents pick, validate and draw charts. claude mcp add ztd-charts -- npx -y ztd-charts-mcp MCP server docs

Try it now with your own data

Open playground · Get started