# Tooltip and legend

> Crosshair tooltips, custom values, and legend toggles.

Source: https://82chart.com/en/docs/tooltip-legend/

Lines and areas show a vertical crosshair with one tooltip for every series at that x; bars highlight the band and list its values; pies, scatter plots and gauges show the item under the pointer. Stacked bars add a total row. Near the right edge the tooltip flips left instead of being cut off.

```js
const chart = createChart('#chart', {
  type: 'line',
  title: 'Visits and sign-ups',
  tooltip: { format: (v, ctx) => ctx.seriesName === 'Sign-ups' ? v + ' (' + (v / 20).toFixed(1) + '%)' : v.toLocaleString('en-US') },
  legend: 'bottom',
  data: {
    labels: ['Oct 1', 'Oct 2', 'Oct 3', 'Oct 4', 'Oct 5', 'Oct 6', 'Oct 7', 'Oct 8', 'Oct 9', 'Oct 10', 'Oct 11', 'Oct 12', 'Oct 13', 'Oct 14', 'Oct 15', 'Oct 16', 'Oct 17', 'Oct 18', 'Oct 19', 'Oct 20', 'Oct 21'],
    series: [
      { name: 'Visitors', data: [1820, 2140, 1990, 2410, 2290, 1650, 1580, 2010, 2380, 2550, 2470, 2620, 1910, 1840, 2230, 2680, 2810, 2740, 2950, 2100, 2060] },
      { name: 'Sign-ups', data: [120, 156, 131, 188, 171, 98, 92, 140, 176, 205, 190, 214, 121, 117, 163, 221, 240, 228, 262, 141, 136] },
    ],
  },
});
chart.on('legendclick', (e) => log(e));
```

## tooltip

| Value | What it does |
| --- | --- |
| `true` | Default |
| `false` | No tooltip (with `group` the crosshair stays) |
| `{ format(value, ctx) }` | Write the value text yourself; `ctx` is `{ seriesName, seriesIndex, index, x }` |

Tooltip text is set with `textContent`, so HTML in a series name never runs. Show the tooltip from code with `chart.showTooltip(index, seriesIndex?)`; `chart.showTooltip(null)` hides it.

## legend

| Value | What it does |
| --- | --- |
| default | Top with two or more series, none for one (the title names it); right for pies and donuts |
| `'top' \| 'bottom' \| 'right'` | Placement |
| `true` / `false` | Always show / hide |

Legend items are buttons: clicking hides the series and refits the axis (the last visible series stays), hovering dims the others. From code: `chart.toggleSeries(index, visible?)`.

## When the legend overflows (legendMaxRows)

A top or bottom legend longer than `legendMaxRows` rows (default 2) folds the rest behind a "+N more" button, which opens them all and turns into "Show less" (`aria-expanded`). Rows are counted at the drawn width, so a narrower screen folds more. `0` never folds. Downloaded PNG and SVG files and printouts include every item. Change the words with `locale: { legendMore, legendLess }`.

```js
createChart('#chart', {
  type: 'line',
  title: 'Indicators by province',
  language: 'en',
  legendMaxRows: 1,
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr'],
    series: ['Seoul', 'Busan', 'Daegu', 'Incheon', 'Gwangju', 'Daejeon', 'Ulsan', 'Sejong', 'Gyeonggi', 'Gangwon', 'N. Chungcheong', 'S. Chungcheong', 'N. Jeolla', 'S. Jeolla'].map((name, k) => ({ name, data: [10 + k, 12 + k, 11 + k * 1.5, 14 + k] })),
  },
});
```