How to highlight cells and yaxis ticks on highcharts heatmap hover

Question

I have a large heatmap, and because it's so large, I'm trying to highlight the cell when someone mouses over it, and I'd also like to highlight the y-axis tick as a time reference because of the large width of the chart. I've seen some examples of this, but my heatmap is not responding with hover effects.

I've used this example to highlight the cells red, but it's not working. http://jsfiddle.net/937twae7/ I've also researched this method for highlighting tick values, but it's probably not working for similar reasons. https://jsfiddle.net/sjapdya6/1/

In the "series" section of code, I've done this:

...
states: {
  hover: {
    color: 'red'
  }
}
...

Here's my chart: https://jsfiddle.net/civilsurfer/Lhysx2vg/1/

Nothing happens as I hover on the cells.

Thanks for any assistance.

Answer 1

You used the boost module which increases performance, but causes some limitations - for example, the inability to change color in states.

To highlight an axis label you need to adjust the findTick function:

function findTick(point, ticks) {
    for (var tickValue in ticks) {
        if (tickValue == point.y) {
            return ticks[tickValue]
        }
    }
}

Live demo: https://jsfiddle.net/BlackLabel/agcper18/

Docs: https://www.highcharts.com/docs/advanced-chart-features/boost-module