# blocks/chart

> Chart — hand-written SVG line, bar, area and pie charts drawn from a table block: the first row names the series, the first column labels the points, the other cells are numbers.

Chart (F-35) — hand-written SVG line, bar, area and pie charts drawn from a table block: the first row names the series, the first column labels the points, the other cells are numbers. It redraws from a model listener whenever the table changes, so typing in a cell costs zero React renders. Colours are the --v-chart-* custom properties, so it follows the theme.

```js
import chart from 'verbal-editor/blocks/chart';
```

| JS gzip | CSS gzip |
| --- | --- |
| 1.91 KB | 0.65 KB |

See it live on [Tables & charts](#/examples/tables) — every example page on the landing is editable.

## Contract

|  |  |
| --- | --- |
| Block type | `chart` |
| Content | no text of its own |
| Props | `table: string` `kind: bar \| line \| area \| pie` |
| Slash menu | `▁▃▆ Chart` |
| Keywords | `graph` `plot` `bar` `line` `pie` |

## Acceptance

| Feature | Acceptance | Budget |
| --- | --- | --- |
| F-35 · Charts | Renders from a table reference; re-renders on source table change; theme-aware via CSS custom properties | ≤ 3KB |