Docs › Interaction and export

Tooltip and legend

Crosshair tooltips, custom values, and legend toggles.

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.

Live example

Click the chart or move through it with the keyboard.

Code for this example

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));

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?).