CODEWITHSUNDEEP
javascriptjqueryhighcharts
Anson Aştepta
Anson Aştepta

Reputation: 1143

HighChart : plot line click event for multiple chart

I am using highchart for some drilldown functions.

I having a function to let the user click on an area plot and add a line. But then i found out my function has a bug in it. There's should be only one red line between those charts, but when the user click on the other chart the existing red line on the first chart is not removing.

The belowing is the function my charts sharing.

  var myPlotLineId = "myPlotLine";

    addPlotLine = function(evt) {
      var point = evt.point;
      var xValue = point.x;
      var xAxis = point.series.xAxis;

      Highcharts.each(xAxis.plotLinesAndBands, function(p) {
        if (p.id === myPlotLineId) {
          p.destroy();
        }
      });
      xAxis.addPlotLine({
        value: xValue,
        width: 1,
        color: 'red',
        id: myPlotLineId
      });
    };

It should only allow one red line since i am using ID.

The below is the current situation. enter image description here

Since i am using id for the plotline is shouldn't allow two line, please see my example:

http://jsfiddle.net/Xm4vW/74/

I want only ONE RED LINE in total out of many charts

UPDATE 1 :

I have tried redraw() in the new demo : http://jsfiddle.net/Xm4vW/80/

but it doesn't help. Please do let me know if the question is not clear enough.

Upvotes: 2

Views: 913

Answers (1)

Asad Sarwar
Asad Sarwar

Reputation: 583

There is nothing like 'Highcharts.each(xAxis.plotLinesAndBands, function(p) '. Iterate charts by loop and use 'removePlotLine(PlotLineID)' instead of 'destroy()':

for(i=0;i<Highcharts.charts.length; i++){
    var chart=Highcharts.charts[i];
    chart.xAxis[0].removePlotLine('myPlotLineId');
}

And set id in parenthesis:

id: 'myPlotLineId'

here is jsfiddle http://jsfiddle.net/asadsarwar89/bh4kz9rw/

Upvotes: 3

Related Questions