x-area labels on hover

Question

I need add another color for xAxis labels when it's hover (like number 19 in the picture). I saw this property later but I lost it.

Need a help =)

And can I set a property (z-index) for xAxis tick? Cause its color must be white, and now I can't see this color, when its z-index less than z-index chart's area.

score 0 · Accepted Answer · edited May 23 '17 at 12:12

For your first question, I would use a shared tooltip and the point mouseOver event to change the corresponding axis label:

   plotOptions: {
        series: {
            point: {
                events: {
                    // on mouseOver make the xaxis label red
                    mouseOver: function(){
                        var xAxis = this.series.chart.xAxis[0];
                        $(xAxis.ticks[this.x].label.element).css('fill','red');
                    },
                    // on mouseOut make it gray again
                    mouseOut: function(){
                        var xAxis = this.series.chart.xAxis[0];
                        $(xAxis.ticks[this.x].label.element).css('fill','#606060');
                    }
                }
            }
        }
    },

Example here.

For your second question, z index with SVG is a little tricky. It doesn't have a true zIndex you can re-order but rather it's dictated by the order in which the elements are drawn. I can't see it matters, though, because the labels are drawn on top of the chart area already (or else you wouldn't see them at all).

Thank U! But I thought there is some another propertys, another way... to specify these settings. It's my first question, and it's success! — Anna Bakurova, Nov 12 '14 at 16:15

x-area labels on hover

1 Answers1