How to add additional information to chart.js tooltip?

Member

by ryleigh , in category: Javascript , a year ago

How to add additional information to chart.js tooltip?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by raven_corwin , a year ago

@ryleigh 

There are a few ways to add additional information to the tooltip in Chart.js:

  1. Using the "custom" option in the tooltip configuration: You can create a custom function that returns the tooltip content with additional information included. Here's an example:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
options: {
  tooltips: {
    mode: 'index',
    intersect: false,
    custom: function(tooltipModel) {
      // Tooltip Element
      var tooltipEl = document.getElementById('chartjs-tooltip');
      
      // Create element on first render
      if (!tooltipEl) {
        tooltipEl = document.createElement('div');
        tooltipEl.id = 'chartjs-tooltip';
        tooltipEl.innerHTML = '<table></table>';
        document.body.appendChild(tooltipEl);
      }
      
      // Hide if no tooltip
      if (tooltipModel.opacity === 0) {
        tooltipEl.style.opacity = 0;
        return;
      }
      
      // Set caret Position
      tooltipEl.classList.remove('above', 'below', 'no-transform');
      if (tooltipModel.yAlign) {
        tooltipEl.classList.add(tooltipModel.yAlign);
      } else {
        tooltipEl.classList.add('no-transform');
      }
      
      // Set Text
      if (tooltipModel.body) {
        var titleLines = tooltipModel.title || [];
        var bodyLines = tooltipModel.body.map(function(bodyItem) {
          return bodyItem.lines;
        });
        
        var innerHtml = '<thead>';
        titleLines.forEach(function(title) {
          innerHtml += '<tr><th>' + title + '</th></tr>';
        });
        innerHtml += '</thead><tbody>';
        
        bodyLines.forEach(function(body, i) {
          var colors = tooltipModel.labelColors[i];
          var style = 'background:' + colors.backgroundColor;
          style += '; border-color:' + colors.borderColor;
          var span = '<span style="' + style + '"></span>';
          innerHtml += '<tr><td>' + span + body + '</td></tr>';
        });
        innerHtml += '</tbody>';
        
        var tableRoot = tooltipEl.querySelector('table');
        tableRoot.innerHTML = innerHtml;
      }
      
      // Display, position, and set styles for tooltip
      tooltipEl.style.opacity = 1;
      tooltipEl.style.position = 'absolute';
      tooltipEl.style.left = tooltipModel.caretX + 'px';
      tooltipEl.style.top = tooltipModel.caretY + 'px';
      tooltipEl.style.fontFamily = tooltipModel._bodyFontFamily;
      tooltipEl.style.fontSize = tooltipModel.bodyFontSize + 'px';
      tooltipEl.style.fontStyle = tooltipModel._bodyFontStyle;
      tooltipEl.style.padding = tooltipModel.yPadding + 'px ' +
          tooltipModel.xPadding + 'px';
    }
  }
}


  1. Using the "callbacks" option in the tooltip configuration: You can use the callbacks option to modify the tooltip content. Here's an example:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
options: {
  tooltips: {
    callbacks: {
      label: function(tooltipItem, data) {
        var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || '';
        var label = data.labels[tooltipItem.index];
        var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
        
        return datasetLabel + ': ' + label + ' - ' + value;
      }
    }
  }
}


These are just a couple of ways to add additional information to the tooltip in Chart.js. You can customize the tooltip content further by modifying the custom or callbacks functions to suit your needs.

Related Threads:

How to display information in pie chart with chart.js?
How to detect when tooltip closes in chart.js?
How to append more data in tooltip of graph in chart.js?
How to append text or symbol to tooltip of chart.js?
How to display kb, mb, gb, tb in chart.js tooltip?
How to add tooltip to datatable header in vuetify?