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.

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

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.

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:

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).
• In a template an unknown name stays as written.

Related