How to do mouse over x-Axis[Cateogories] in High charts when you mouse over the x-Axis [Category]

Question

How to do mouse over x-Axis[Category] in High charts when you mouse over the x-Axis [Category] .

plotOptions: {
  areaspline: {
        fillOpacity: 0.5
    },

    series: {

        point: {
            events: {
                mouseOver: function() {
                    //alert ('Category: '+ this.category +', value: '+ this.y);
                    var res = this.category;

                    console.log(res);
                    var chart = Highcharts.charts[0];

                    //var first_set = this.getSpecificData(res);
                    data = [];
                    for (var i = 0; i < chart.series.length; i++) {

                        for (var j = 0; j < chart.series[i].points.length; j++){
                                if(j == res)
                                {
                                    //console.log(chart.series[i].points[j].y);
                                    data.push(chart.series[i].points[j].y)
                                }

                            }



                    }
                    maximum_value = (Math.max.apply(Math, data));
                    for (var k = 0; k < data.length; k++) {
                        if( data[k] == maximum_value )
                        {
                            //console.log("Kvalue:"+k);
                            first_set = k;
                        }

                    }

                    var point = chart.series[first_set].data[res];
                    var x = point.plotX + chart.plotLeft;
                    var y = point.plotY + chart.plotTop;
                    var height =(chart.plotHeight-point.plotY); //want height of the point!
                    chart.renderer.rect(x, y, 3, height, 0).attr({fill: 'orange', zIndex:3,id:'mychart'}).add();


                },
                mouseOut: function(e){
                $("#mychart").remove();

                }
            }
        }
    }
},
This is my jsfiddle: [click here][1]

I want to the mouse over and mouse out for when i mouse over the X-Axis category ie ,week0, Week1,Week2.. Week7 . Now Mouserover is added only for plot points over plotlines and charts Thanks In Advance [1]: http://jsfiddle.net/VhMjv/7/

Answer 1

for having mouseover and mouseleave events on the xAxis categories you can do as below

step 1:

set useHTML : true from xAxis Labels and return a div with a class in the xAxis labels formatter

xAxis: {
    labels: {
        useHTML: true,
        formatter: function () {
            return "<div class='xLabels'> Week " + this.value + "</div>"; // clean, unformatted number for year
        }
    }
}

step 2:

now that you have got your divs placed in the chart write a jquery event to handle mouseover and mouseleave

$(".xLabels").mouseover(function() {
    alert("mouse Entered")
})
$(".xLabels").mouseleave(function() {
    alert("mouse Left")
})

updated your fiddle here

Hope this will help you