CODEWITHSUNDEEP
highcharts
ragulka
ragulka

Reputation: 4342

Detect a click on, and add hover/selected style for x axis on area chart in Highcharts?

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?

Upvotes: 1

Views: 744

Answers (3)

Strikers
Strikers

Reputation: 4776

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

Upvotes: 0

jlbriggs
jlbriggs

Reputation: 17800

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.

Upvotes: 0

Gopinagh.R
Gopinagh.R

Reputation: 4916

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.

Upvotes: 1

Related Questions