javascripthtmlchart.jstooltipjquery-ui-tooltip

How to hide tooltip for certain bars in chart.js

I am making a stacked bar that looks like the following:

enter image description here

The spaces you see in between each bar are bars static-sized bars that are the color of the background. I used them because I could not figure out how to add a space between bars in chart.js. I am trying to figure out how to hide the tooltip for the static-sized gray bars. As of right now, my code shows a black tooltip that freezes until I refresh the page when I hover over a gray bar. Here is the code for hiding it so far:

filter: function(tooltipItem) {
    return tooltipItem.dataset.backgroundColor[0] !== "#f5f5f5";
    // if (tooltipItem.dataset.backgroundColor[0] == "#f5f5f5") {
    //     return false;
    // }
    // console.log(tooltipItem.dataset.backgroundColor);
    // return true;
 }
Solution

  • I figured out how to get this to work. I hid the labels based on the background-color of a bar.