Introduction

Chartory is 132 chart types for Figma and React, in two collections: Hearth and Signal. Every chart is a Figma component and a React component with the same name, bound to one token system you can theme.

Why Chartory

<Waterfall>

Same name in Figma and code

chart/042-waterfall-cash-bridge is <Waterfall>. Every variant is a prop, so a design hands off without a rename.

MCP

Built for AI agents

An MCP server installs charts on request, and AGENTS.md keeps your agent on the tokens instead of raw colours.

XS–L

Re-laid out, never scaled

XS, S, M and L redraw each chart from its data. Labels thin out and the legend moves; nothing shrinks.

900+

Designed in Figma first

900+ variants bound to Foundations variables. The Figma file is the spec the code follows.

4 modes

Light and dark built in

Hearth has four modes, Chartory and Ember, each light and dark; Signal has light and dark. No hex in a chart.

100+

100+ types, real data

Six sector datasets, from order book depth to marey schedules, so a dashboard reads like a product.

What you get

PartHoldsIn plans

Figma file100+ types, 900+ variants, widget kit, every collectionFigma, Complete

Free React chartsTypes 1–100 in Hearth, MIT, public registry, MCP, llms.txtNo plan

React codeTypes 101–132, Signal, widgets, overlays, GitHub repositoryCode, Complete

Sector packsSix datasets, and packs added laterComplete

How it fits together

One slug per type: chart/042-waterfall-cash-bridge in Figma, <Waterfall> in code, /charts/waterfall on the site.
One token system: the modes restyle every chart in a collection; no chart holds a hex.
Two collections: Hearth and Signal draw the same charts and widgets in two languages. Charts 1–100 are free in React, in Hearth, under MIT; Signal code comes with Code and Complete.
Four sizes: XS, S, M and L redraw each chart from its data.