# Legends and copy
URL: /diagrammatic/docs/legends-and-copy

The built-in legend, the DOM legend, number formatting, and why charts take data instead of copy.

> For AI agents: a documentation index is available at [llms.txt](/llms.txt). Use `.md` for canonical markdown pages; `.mdx` is kept as a backwards-compatible alias on supported URL paths.

The built-in legend is drawn inside the SVG and appears when a chart has two or more named series. `legend={false}` turns it off. The `Legend` export is its DOM counterpart: a list of swatches and names on the page's own type, wrapping like text, and colored through the same tokens.

```
import { Legend, StackedArea } from "diagrammatic";

<Legend names={series.map((s) => s.name)} />
<StackedArea series={series} labels={weeks} legend={false} />
```

- names

  - search
  - direct
  - referral
  - social

* title

  Weekly sessions by channel

* labels

  - W1
  - W2
  - W3
  - W4
  - W5
  - W6
  - W7
  - W8
  - W9
  - W10

* series

  - - name

      search

    - data

      - 42
      - 48
      - 51
      - 58
      - 61
      - 66
      - 64
      - 71
      - 77
      - 82

  - - name

      direct

    - data

      - 30
      - 29
      - 33
      - 35
      - 34
      - 38
      - 41
      - 40
      - 43
      - 45

  - - name

      referral

    - data

      - 12
      - 15
      - 14
      - 18
      - 22
      - 21
      - 25
      - 29
      - 28
      - 33

  - - name

      social

    - data

      - 8
      - 9
      - 13
      - 12
      - 11
      - 15
      - 14
      - 18
      - 21
      - 19

fig. 01 · legend={false} on the figure, and the DOM Legend on the page's own type

Use the DOM legend when names are long, when several charts share one legend, or when the legend belongs in a card header. `getSeriesColor` from `diagrammatic/interactive` reads a series' rendered color from a live figure when you would rather ask the chart than the palette.

## Numbers

A chart prints numbers through `format`, a function from a number to a string. `formatCompact` is exported for the common case:

```
import { Column, formatCompact } from "diagrammatic";

<Column items={revenue} values format={(v) => `$${formatCompact(v)}`} />
```

## Data, not copy

Chart props take data: numbers, labels, and series names. A prop that would take a pre-formatted sentence or a pre-cut label is not a chart prop, and the page around the figure is where that copy belongs. Titles, source lines, and captions are your markup:

```
<figure>
  <Column title="FrontierBench 1.1 scores" items={scores} categorical values />
  <figcaption>Weighted mean of six agent tasks. Higher is better.</figcaption>
</figure>
```