Tutorials / Chartjs /

Hide the Tooltip in ChartJS

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 // <-- this option disables tooltips
      }
    }
  }
});

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

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

Did you find this tutorial useful? Say thanks by starring our repo on GitHub!

Hide the Tooltip in ChartJS

More Chartjs Tutorials