How can I prevent the hover data from displaying in Chart.JS?

Question

I've got a horizontal bar chart that looks like this:

...but like this when I hover it:

I've tried to prevent the "hover data" from displaying like this:

var priceBarChart = new Chart(ctxBarChart, {
    type: 'horizontalBar',
    showTooltips: false,
    data: barChartData,
    options: optionsBar
});

...and like this:

var optionsBar = {
    scales: {
        xAxes: [
            {
                stacked: true
            }
        ],
        yAxes: [
            {
                stacked: true
            }
        ]
    },
    showTooltips: false
};

...but neither works - the scrunched tip displays anyway.

How can I prevent the hover data from displaying in Chart.JS?

Answer 1

You should add this to your options:

tooltips: {
    enabled: false
}

Codepen example

More information here

Answer 2

Answer in 2022:

options: {
  plugins: {
      tooltip: {
          enabled: false
               },
           }
         },

Documentation here on Charts.js