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;
  3. tooltipItems.forEach(function(tooltipItem) {
  4. sum += tooltipItem.parsed.y;
  5. });
  6. return 'Sum: ' + sum;
  7. };

Docs