Back

Technologies:

javascriptjavascript
avatar
Tolerim
a month ago

How do I display all data upon triggering a tooltip in Chart.js?

To display specific data when hovering over a bar in Chart Js, is there a way to print the following output when a tooltip is triggered? Please find below the code snippet that you can use: 

let ctx = document.getElementById('myChart').getContext('2d')
let myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['January', 'February', 'March', 'April'],
    datasets: [{
      label: 'Data',
      data: [12, 19, 3, 5],
      borderColor: 'blue'
    }]
  },
  options: {
    plugins: {
      tooltip: {
        mode: 'nearest',
        callbacks: {
          label: function (tooltipItem) {
            console.log([[tooltipItem.label, tooltipItem.raw]]);
            return tooltipItem.raw;
          }
        }
      }
    }
  }

});
You can use the label callback function to print the specific data below each bar when a tooltip is triggered. Here is an example output that will be displayed: 

[['January',12], ['February',19], ['March',3], ['April',5]]
Answers(2)
avatar
Vogi
a month ago
Verified Answer
Yes, you can use the label callback function to print the specific data below each bar when a tooltip is triggered. Here is an example output that will be displayed: 
[['January',12], ['February',19], ['March',3], ['April',5]]
In your code snippet, you have already defined the label callback function as follows: 
label: function (tooltipItem) {
  console.log([[tooltipItem.label, tooltipItem.raw]]);
  return tooltipItem.raw;
}
This function will print the following output when a tooltip is triggered: 
[[tooltipItem.label, tooltipItem.raw]]
You can modify this function to print the specific data below each bar as follows: 
label: function (tooltipItem) {
  console.log([[tooltipItem.label, tooltipItem.raw]]);
  return [[tooltipItem.label, tooltipItem.raw]];
}
This will print the following output when a tooltip is triggered: 
[['January',12], ['February',19], ['March',3], ['April',5]]
I hope this helps! Let me know if you have any other questions.

Sources

javascript - chart js different callback labels - Stack Overflowjavascript - Chart.js tooltips callback function with pie charts ...JavaScript Label Callbacks | JSChartingTooltip | Chart.jsChart.js V2: Add prefix or suffix to tooltip labelChart.js 2.0: How to change title of tooltip - Stack Overflow
avatar
Tolerim
a month ago
Yes, there is a way to print the desired output when a tooltip is triggered in Chart Js. In the given code snippet, you can achieve this by specifying a custom tooltip callback function inside the plugins.tooltip.callbacks object of the options object. Here's an updated version of the code snippet with the custom tooltip callback function: 
let ctx = document.getElementById('myChart').getContext('2d')
let myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['January', 'February', 'March', 'April'],
    datasets: [{
      label: 'Data',
      data: [12, 19, 3, 5],
      borderColor: 'blue'
    }]
  },
  options: {
    plugins: {
      tooltip: {
        mode: 'nearest',
        callbacks: {
          label: function (tooltipItem) {
            let label = myChart.data.labels[tooltipItem.index];
            let value = myChart.data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
            console.log([[label, value]]);
            return [[label, value]];
          }
        }
      }
    }
  }
});
In this new version, the label callback function is defined to log the desired output and return it to be displayed in the tooltip. The label function extracts the label and value at the specified index using myChart.data.labels and myChart.data.datasets and returns the desired output using the return keyword. When the user hovers on a data point, the tooltip will show the desired output in the console and on the chart as well.
;