---
title: "Chart Annotations, Reference Lines and Axes"
description: "Chart annotations: reference lines and bands, point-pinned callouts, axis titles and bounds, and the number and tooltip formatting props."
source: https://lemonadejs.com/charts/docs/annotations/
---

# Chart annotations, reference lines and axes

Context props are arrays: declarative, serializable, and live like every
other prop.

## Plot lines, bands and callouts

<!--example-->

```js
import Charts from '@lemonadejs/charts';

const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
const traffic = [45, 52, 48, 60, 55, 63, 92, 85, 78, 74, 70, 66];

const App = () => html`<${Charts} type="line" categories="${months}"
    series="${[{ name: 'Traffic', data: traffic }]}"
    smooth markers="${false}"
    plotbands="${[{ from: 40, to: 60, color: 'rgba(87,129,99,.12)', label: 'Target' }]}"
    plotlines="${[{ value: 80, dashed: true, label: 'SLA' }]}"
    annotations="${[{ x: 6, y: traffic[6], text: 'Launch' }]}" />`;
```

- **`plotlines`**: `[{ value, color?, label?, dashed?, width?, axis? }]`
  horizontal (or `axis: 'x'` vertical) reference lines.
- **`plotbands`**: `[{ from, to, color?, label?, axis? }]` shaded ranges.
  Also the zone mechanism for [gauge](/charts/docs/pie-radial/) and
  [bullet](/charts/docs/extras/) charts.
- **`annotations`**: `[{ x, y, text, color? }]` callouts pinned to data
  points (`x` is the category index).

## Titles and axes

```js
html`<${Charts} type="bar" series="${series}"
    title="Quarterly results" subtitle="FY 2026, consolidated"
    xtitle="Quarter" ytitle="Revenue" y2title="Margin %"
    ymin="${0}" ymax="${250}" />`
```

- `gridlines`: horizontal y-gridlines (on by default).
- `labelrotation`: force an x-label angle; unset auto-rotates when
  crowded.
- `ylog`: logarithmic y-axis (positive values only).
- `xtype` / `xformat`: continuous or datetime x-axes with custom tick
  formatting.

## Number formatting

Values format compactly by default (1.2k, 3.4M). The formatting props
compose:

```js
html`<${Charts} series="${series}"
    valueprefix="$"          // $120
    valuesuffix=" USD"       // 120 USD
    compact="${false}"       // full numbers
    thousands                // 1,234 (when not compact)
    decimals="${1}"          // fixed decimal places
    valueformat="${(n) => n.toFixed(2) + ' t'}"  // full override
/>`
```

`valueformat` wins over everything; it applies to axis ticks, bar labels
and tooltip values alike.

## Tooltips

The styled tooltip follows the cursor (`tooltip`, on by default). On bar
and stacked charts, `sharedtooltip` lists **every** series for the hovered
column with a crosshair. Set it false for per-point tooltips. For full
control, `tooltipformat` receives `{ title, rows }` and returns the body:

```js
html`<${Charts} series="${series}"
    tooltipformat="${({ title, rows }) =>
        title + ': ' + rows.map((r) => r.name + ' ' + r.value).join(', ')}" />`
```