Detect a click on, and add hover/selected style fo

Question

Example chart: http://www.highcharts.com/demo/area-stacked-percent

1) Can I have a hover style and also perhaps a selected style for the x axis, much like in Highstocks (move the mouse over the chart to see a vertical line on hover): http://www.highcharts.com/stock/demo/area

2) Can I detect a click on this line?

Answer 1

1) Yes: see tooltip.crosshairs: http://api.highcharts.com/highcharts#tooltip.crosshairs

2) I am not sure. You can detect a click on the series, which should give you what you would need from clicking the crosshair line.

Answer 2

Can I have a hover style and also perhaps a selected style for the x axis, much like in Highstock

Of course, you can. Disable the Hover for series and enable the cross hairs in the plotOptions.

        plotOptions: {
        series: {
            marker: {
                states: {
                    hover: { enabled: true   }
                        }
                  } 
            }
       }

Enable Crosshairs

tooltip: {
            crosshairs: true
        }

Can I detect a click on this line?

For triggering an alert upon clicking the line, just add

plotOptions: {
            series: {
                 point: {
                    events: {
                        click: function() {
                            alert ('Clicked on the line');
                        }
                    }
                }
            }
        }

combined answer for both of your questions, fiddled version is here.

Answer 3

yes you can use crosshairs for that

tooltip:{
    crosshairs: true,
    shared: true
}

here shared true will show the info of both the lines in the same tooltip