Hide the Tooltip in ChartJS

0
52
How to Filter an Object by Key in JavaScript


Apr 1, 2022

To disable the tooltip menu that pops up when you hover over a chart element, you must disable it in the options object of your chart configuration.
The path is options.plugins.tooltip.enabled and because the default is true, you must set it to false.

const ctx = document.getElementById('chart').getContext('2d');
const chart = new Chart(ctx, {
  type: 'bar',
    data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
      label: 'Example Data',
      data: [12, 19, 3, 5, 2, 3]
    }]
  },
  options: {
    responsive: true,
    plugins: {
      tooltip: {
        enabled: false 
      }
    }
  }
});

Below is a live example of a bar chart with tooltips disabled.

For comparison, below is the same chart with tooltips enabled.


More Chartjs Tutorials



Source link

Leave a reply

Please enter your comment!
Please enter your name here