Custom Tooltip Content

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

Custom Tooltip Content - 图1

config setup footer

  1. const config = {
  2.   type: 'line',
  3.   data: data,
  4.   options: {
  5.     interaction: {
  6.       intersect: false,
  7.       mode: 'index',
  8.     },
  9.     plugins: {
  10.       tooltip: {
  11.         callbacks: {
  12.           footer: footer,
  13.         }
  14.       }
  15.     }
  16.   }
  17. };
  1. const DATA_COUNT = 7;
  2. const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100, decimals: 0};
  3. const data = {
  4.   labels: Utils.months({count: DATA_COUNT}),
  5.   datasets: [
  6.     {
  7.       label: 'Dataset 1',
  8.       data: Utils.numbers(NUMBER_CFG),
  9.       fill: false,
  10.       borderColor: Utils.CHART_COLORS.red,
  11.       backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
  12.     },
  13.     {
  14.       label: 'Dataset 2',
  15.       data: Utils.numbers(NUMBER_CFG),
  16.       fill: false,
  17.       borderColor: Utils.CHART_COLORS.blue,
  18.       backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
  19.     },
  20.   ]
  21. };
  1. const footer = (tooltipItems) => {
  2.   let sum = 0;
  4.   tooltipItems.forEach(function(tooltipItem) {
  5.     sum += tooltipItem.parsed.y;
  6.   });
  7.   return 'Sum: ' + sum;
  8. };

Docs