---
title: "Labels, tooltips, badges"
description: "The words a plot, a text mark or a label answers with: the label's style, the tooltip template, and the badge chips a ladder output turns into."
order: 39
section: "presentation"
---

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

# Labels, tooltips, badges

The words a plot, a text mark or a label answers with: the label's style,
the tooltip template, and the badge chips a ladder output turns into.

## What it is

`style` on a text or label renderer picks its look: `price_label` draws
the price tag on the axis (the one word `render.text` takes), and a
`render.label` also takes `plain`, `pill` (a rounded chip at the value),
`callout` (a leader line to its bar) and `badge` (a dot in the label's
color). `tooltip` on an output is a template over its own value and any
output or string slot, shown on the legend entry and when the cursor
nears the line; on `render.text` and `render.label` it is one per
renderer, shown on its marks. `badges` names ANOTHER output, a ladder
whose labels become chips on the hover card. `style`, `tooltip`, `hover`
and `badges` are presentation keys, stripped before the compiler like an
output's.

![The five label styles side by side on one small pane: plain words above their bar, a pill chip at the value, a callout chip with a leader line down to its bar, a badge dot in the label's color before its words, and a price_label tag on the price axis tied to its bar](/wrun/images/wrun-label-styles.svg)

1. **plain**: the words alone, at the label's `x` and `y`.
2. **price_label**: a tag on the price axis at the mark's price, the one
   style `render.text` also takes.
3. **pill**: a rounded chip at the value.
4. **callout**: a chip with a leader line down to its bar.
5. **badge**: a dot in the label's color, then the words.

## Declare it

```typescript
const basis = output("basis", line, overlay, { color: "#2962ff", width: 2, label: "Basis", format: "price", tooltip: "{{label}} {{value:price}}" });
// A text mark on every stretched bar (the slot is left unwritten on quiet bars).
render.text("stretch_mark", { y: "average", text: "readout", color: "#f59e0b", size: 10 });
// One label riding the newest bar, at the average.
render.label("average_tag", { x: "bar_time", y: "average", text: "tag", color: "#38bdf8", size: 11 });
```

A template placeholder is `{{name}}` for an output or a string slot,
`{{name:format}}` with a format from the list (`price`, `%`, `si`, `int`,
`0`, `0.0`, `0.00`, `0.000`), `{{label}}` and `{{value}}` for the owning
output: `"{{label}} {{value:price}} · {{state}}"`. A price tag on every
signal bar is `render.text` with `style: "price_label"`: each written
bar's text sits at `y` as a price tag.

![One tooltip template resolving: the declaration reads tooltip with label, value as a price and state in double braces; the legend entry shows Basis 83,600.00 and the word stretched; the same words sit under the cursor near the line on the chart; and the hover card carries the ladder output's labels as badge chips](/wrun/images/wrun-tooltip-template.svg)

1. **The template** on the output: `{{label}}` is the output's label,
   `{{value:price}}` its value at the chart's price precision, `{{state}}`
   a string slot or another output.
2. **On the legend entry**: the same words, resolved on the newest bar.
3. **Near the line**: the same tooltip when the cursor nears the plot.
4. **Badges**: the ladder output named in `badges` turns its labels into
   chips on the hover card.

## What the chart draws

What each surface answers with:

| Surface | Answers with |
| --- | --- |
| a plot (a line, columns, marks) | its `hover` blocks; without them its `tooltip`, else its label and value |
| a legend entry | the output's `tooltip`, and the output's hover card when the cursor rests on it |
| a text mark (`render.text`) | the renderer's `tooltip` on its marks, its `hover` list, its `badges`; `style: "price_label"` draws each mark as a price tag |
| a label (`render.label`) | the same, with `style` one of `plain`, `price_label`, `pill`, `callout`, `badge` |
| a HUD tile | the tile again as a hover card |
| a table or a drawing | nothing |

## Gotchas

- The pill, callout and badge label styles draw on the next engine pin.
- `render.text` takes `price_label` only (no `style` is plain text); a
  label `style` outside the five words is refused.
- `size` is an integer pixel count, 6..64, on `render.text` and
  `render.label` (`10` reads as small text, `16` as large); there is no
  alignment option on renderer text.
- An output badging itself is refused; `badges` names a declared output.
- A label has no corner position: it sits at its `x` and `y`, anchored
  to a bar and a price. A corner readout is a HUD card
  ([HUD cards](hud-and-hover-cards.md#hud-cards)).
- In a template an unknown name stays as written.

## Related

- [Hover cards](hud-and-hover-cards.md#hover-cards), [HUD cards](hud-and-hover-cards.md#hud-cards),
  [Legend](legend.md), [What the chart shows](overview.md)
- [Plotting](plotting.md): the text, label and table
  renderers, and the string slots they read
- [Styling](styling.md): the rest of the style vocabulary