CODEWITHSUNDEEP
javascripthighcharts
user1610717
user1610717

Reputation: 325

How to highlight cells and yaxis ticks on highcharts heatmap hover

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.

Upvotes: 0

Views: 665

Answers (1)

ppotaczek
ppotaczek

Reputation: 39069

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

Upvotes: 1

Related Questions