Search code examples
jqueryhovertooltipchart.jschart.js2

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


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

enter image description here

...but like this when I hover it:

enter image description here

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?


Solution

  • You should add this to your options:

    tooltips: {
        enabled: false
    }
    

    Codepen example

    More information here