Custom Tooltip Content | Chart.js
Description: Open source HTML5 Charts for your website

# # Custom Tooltip Content

This sample shows how to use the tooltip callbacks to add additional content to the tooltip.

const config = { type: 'line', data: data, options: { interaction: { intersect: false, mode: 'index', }, plugins: { tooltip: { callbacks: { footer: footer, } } } } };

    const config = {
      type: 'line',
      data: data,
      options: {
        interaction: {
          intersect: false,
          mode: 'index',
        },
        plugins: {
          tooltip: {
            callbacks: {
              footer: footer,
            }
          }
        }
      }
    };

const DATA_COUNT = 7; const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100, decimals: 0}; const data = { labels: Utils.months({count: DATA_COUNT}), datasets: [ { label: 'Dataset 1', data: Utils.numbers(NUMBER_CFG), fill: false, borderColor: Utils.CHART_COLORS.red, backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5), }, { label: 'Dataset 2', data: Utils.numbers(NUMBER_CFG), fill: false, borderColor: Utils.CHART_COLORS.blue, backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5), }, ] };

    const DATA_COUNT = 7;
    const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100, decimals: 0};
    const data = {
      labels: Utils.months({count: DATA_COUNT}),
      datasets: [
        {
          label: 'Dataset 1',
          data: Utils.numbers(NUMBER_CFG),
          fill: false,
          borderColor: Utils.CHART_COLORS.red,
          backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
        },
        {
          label: 'Dataset 2',
          data: Utils.numbers(NUMBER_CFG),
          fill: false,
          borderColor: Utils.CHART_COLORS.blue,
          backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
        },
      ]
    };

const footer = (tooltipItems) => { let sum = 0; tooltipItems.forEach(function(tooltipItem) { sum += tooltipItem.parsed.y; }); return 'Sum: ' + sum; };

    const footer = (tooltipItems) => {
      let sum = 0;
      tooltipItems.forEach(function(tooltipItem) {
        sum += tooltipItem.parsed.y;
      });
      return 'Sum: ' + sum;
    };

## # Docs

- Data structures (`labels`)
- Line
- Tooltip
  - Tooltip Callbacks