How to plot line in highcharts on charts click event?

2
votes

Is it possible to plot a line on click event of the chart?

Chart Click Event

chart: {
        events: {
            click: function(event) {
                alert ('x: '+ event.xAxis[0].value  +', y: '+
                      event.chartY );
                 var chart = event.xAxis[0];
                            chart.removePlotLine('plot-line-1');
                            chart.addPlotLine({
                                value: event.chartX,
                                color: '#FF0000',
                                width: 2,
                                id: 'plot-line-1'
                            });
            }
        }        
    },

I had initially done the same on the plotoptions click event of highcharts. Now, doing the same using chart click event? but not able to get the series xaxis object.

1
highcharts

1 Answers

6
votes

Worked! Had to read the highcharts document... :-)

Working LINK

 chart: {
        events: {
            click: function (event) {
                var chart = this.xAxis[0];
                chart.removePlotLine('plot-line-1');
                chart.addPlotLine({
                    value: event.xAxis[0].value,
                    color: '#FF0000',
                    width: 2,
                    id: 'plot-line-1'
                });
            }
        }