---
title: "Legend"
description: "The legend names the indicator, then shows each drawn output's label and value; every word on it comes from a declaration."
order: 38
section: "presentation"
---

<!-- source: docs/indicators/presentation/legend.md; generated by packages/cli/scripts/gen-indicator-docs.ts, do not edit -->

# Legend

The legend names the indicator, then shows each drawn output's label and
value; every word on it comes from a declaration.

## What it is

The legend shows each output's `label`, or its name read as words when
there is none (`bb_upper` reads "Bb upper"), and its value in the
output's `format`; `legend: false` keeps an output out of the legend, and
`legend({ title: "..." })` adds words after the indicator's name. Outputs
mount in declaration order, which is their legend and paint order. A
`render.legend` entry adds a line the outputs do not carry, a string
slot's words or an output's formatted value, printed after the value
lines. The dot before an entry shows the colour the hovered bar is drawn
in, so a `color_by` ladder, a packed colour or a column's sign pair reads
in the legend as it does on the chart. A candle group is one entry
reading its open, high, low and close (`O 1.20 H 1.31 L 1.18 C 1.29`),
its dot the up or down colour of the hovered bar. A `range()` band has a
row of its own (`legend: false` drops it, `label` names it), a guide
(`role: "guide"`) never appears, and a pane declared with a `title`
heads its own legend with that title.

## Declare it

- `legend({ title })`: the words after the indicator's name, `(14)`
  style; `{{length}}` reads a setting by name. Without it the legend
  shows the package name.
- Per output: `label` (the legend and Style page name), `format`
  (`price`, `%`, `si`, `int`, `0`, `0.0`, `0.00`, `0.000`, `usd`,
  `auto`) with `decimals` (0..8), `signed` and `unit` (printed after the
  value; unbounded on an output, as it always was), and `legend: false`. `price` prints at
  the chart's price digits on every pane; `usd` reads `$1.2M`, `auto`
  six significant digits with `,` thousands
  ([Styling](styling.md#placement-per-output)).
- Per band: `range(a, b, { legend: false, label: "Band" })`.
- `render.legend(name, { text?, value?, format?, color?, color_by?,
  colors? })`: an entry in the legend, a string slot's words (`text`) or
  an output's formatted value (`value`), in a static `color` or colored
  per bar by a ladder (`color_by` and `colors`, both or neither).
- `color: "@name"` on a legend entry, or an entry of its `colors`, binds
  that spot to a `param.color`, so the user picks the entry's color
  ([The Style page](../settings/style-page.md)).

```typescript
param.int("length", 20, { min: 2, max: 500 });
const basis = output("basis", line, overlay, { color: "#2962ff", width: 2, label: "Basis", format: "price", tooltip: "{{label}} {{value:price}}" });
output("rsi", line, lower, { color: "#8b5cf6", label: "RSI", format: "0.0" });
output("state", none);
string("regime", { max_bytes: 16 });
legend({ title: "({{length}})" });
render.legend("regime_entry", { text: "regime", color_by: "state", colors: ["#ef5350", "#26a69a"] });
```

## What the chart draws

![the legend row: the name with its title suffix, then two labelled values](/wrun/images/wrun-legend.svg)

The legend reads "Basis 20", then "Basis 64,120.5", "RSI 61.3" and the
regime word in the ladder's color. An output's `tooltip` is shown on its
legend entry, and resting the cursor on the entry opens the output's
hover card ([Hover cards](hud-and-hover-cards.md#hover-cards)).

## Gotchas

- `legend: false` keeps an output out of the legend; `visible: false`
  starts it hidden; a `role: "guide"` output is never listed.
- `decimals`, `signed` and a printed `unit` need `format`; a `unit`
  without one is recorded and never printed.
- A legend entry needs `text` (a string slot) or `value` (an output), and
  takes `color_by` and `colors` together, not one without the other.
- `legend` needs a nonempty title.
- A presentation name used twice is refused.
- The legend is drawn where the indicator runs in the browser.

## Related

- [What the chart shows](overview.md), [Hover cards](hud-and-hover-cards.md#hover-cards),
  [HUD cards](hud-and-hover-cards.md#hud-cards), [Blocks and tiles](hud-and-hover-cards.md#blocks-and-tiles)
- [The Style page](../settings/style-page.md): the `"@name"` binding
- [Plotting](plotting.md): the outputs the legend lists