Bold X-Axis Label on Point Hover in Highcharts Column Chart

Question

I\'m using a Highcharts column chart (http://www.highcharts.com/demo/column-basic) with over 50 rows of data and 3 different series. Because of this amount and the chart wid

Answer 1

Here's a quick sample I just created. I'm tired and it could be improved. It links the axis label to the mouseover by point index:

          series: {
                point: {
                    events: {
                        mouseOver: function() {
                           $(this.series.chart.xAxis[0].labelGroup.element.childNodes[this.x]).css('fill', 'black');
                        },
                        mouseOut: function() {                       
                             $(this.series.chart.xAxis[0].labelGroup.element.childNodes[this.x]).css('fill', '#999999');
                        }
                    }
                }
            }

Fiddle here.

Answer 2

Alternative solution: using HTML paramter and then jquery to find elemetn in DOM.

http://jsfiddle.net/uPBvH/2/

series: {
                point: {
                    events: {
                        mouseOver: function() {                 $('.highcharts-axis-labels span').eq(this.x).addClass('active');
                        },
                        mouseOut: function() {                       
  $('.highcharts-axis-labels span').eq(this.x).removeClass('active');                        
                        }
                    }
                }
            }