# 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

- **Same name in Figma and code** (<Waterfall>): chart/042-waterfall-cash-bridge is <Waterfall>. Every variant is a prop, so a design hands off without a rename.
- **Built for AI agents** (MCP): An MCP server installs charts on request, and AGENTS.md keeps your agent on the tokens instead of raw colours.
- **Re-laid out, never scaled** (XS–L): XS, S, M and L redraw each chart from its data. Labels thin out and the legend moves; nothing shrinks.
- **Designed in Figma first** (900+): 900+ variants bound to Foundations variables. The Figma file is the spec the code follows.
- **Light and dark built in** (4 modes): Hearth has four modes, Chartory and Ember, each light and dark; Signal has light and dark. No hex in a chart.
- **100+ types, real data** (100+): Six sector datasets, from order book depth to marey schedules, so a dashboard reads like a product.

## What you get

| Part | Holds | In plans |
| --- | --- | --- |
| Figma file | 100+ types, 900+ variants, widget kit, every collection | Figma, Complete |
| Free React charts | Types 1–100 in Hearth, MIT, public registry, MCP, llms.txt | No plan |
| React code | Types 101–132, Signal, widgets, overlays, GitHub repository | Code, Complete |
| Sector packs | Six datasets, and packs added later | Complete |

## 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.

## Start

- [All 100+ types](https://usechartory.com/docs/charts): Every type by the question it answers.
- [Sizes](https://usechartory.com/docs/sizes): How a chart re-lays out at XS, S, M and L.
- [Agents](https://usechartory.com/docs/agents): Let your coding agent install charts.