Highcharts get PlotLine by id

Question

We can get any PlotLine from array by index:

var plotLine = $('#container').highcharts().xAxis[0].plotLinesAndBands[0];

But, this way isn't simple when we have many dynamical PlotLines. Is there a way to easily get PlotLine by id?

Like removing:

chart.xAxis[0].removePlotLine('plotline-1');

Answer 1

I found only full array iteration method:

for (var i = 0; i < axis.plotLinesAndBands.length; i++) {
  if (axis.plotLinesAndBands[i].id === plotLineId) {
    return axis.plotLinesAndBands[i];
  }
}

Answer 2

You could use part of the logic from removePlotBandOrLine() function of Axis prototype to create and add to prototype a new function, called getPlotLineOrBand. It would cycle through all plot bands/lines and return the one where id is right.

$(function(H) {
  H.AxisPlotLineOrBandExtension.getPlotLineOrBand = function(id) {
    var plotLinesAndBands = this.plotLinesAndBands,
     i = plotLinesAndBands.length;

    while (i--) {
      if (plotLinesAndBands[i].id === id) {
        return plotLinesAndBands[i];
      }
    }

    return;
  };

  H.extend(H.Axis.prototype, H.AxisPlotLineOrBandExtension);
}(Highcharts));

Example: http://jsfiddle.net/d_paul/g9sf75ju/

Answer 3

You can define plotLine Id appending with div. as all div would be having different id ,plotLine will always have unique ID.

take a look , similar functionality I have implemented in my project:

  var plotId = divId + 'plot-line-scatter';
        var chartX = $( '#' + divId + '' ).highcharts();
        if(null != chartX){
            chartX.xAxis[0].removePlotLine( plotId );
            chartX.xAxis[0].addPlotLine( {
                value : time,
                color : '#FF0000',
                width : 1,
                id : plotId
            } );

Answer 4

I was looking for a solution to get a plotBand by id to hide it with a series. Based on the snippet of r00tGER I made a function to call:

/**
 * Get the plotBand or plotLine with given id out of all plotBands and plotLines of one Axis
 * @param id The id of the plotBand or plotLine you are looking for
 * @param axis The axis where the plotBand/plotLine is bound
 */
function getPlotBandOrLineById(id, axis) {
  // loop through all plotBands/plotLines and check their id
  for (var i = 0; i < axis.plotLinesAndBands.length; i++) {
    if (axis.plotLinesAndBands[i].id === id) {
      return axis.plotLinesAndBands[i];
    }
  }
}

With that function you can hide and show a plotBand (or plotLine) with their series:

$(function () {
  $('#chart_container').highcharts('StockChart', {
    ...
    series: [
      {
        name: 'Carbs',
        ...
        events: {
          show: function () {
            var plotBand = getPlotBandOrLineById('goal_carbs', this.chart.yAxis[0]);
            plotBand.hidden = false;
            plotBand.svgElem.show();
          },
          hide: function () {
            var plotBand = getPlotBandOrLineById('goal_carbs', this.chart.yAxis[0]);
            plotBand.hidden = true;
            plotBand.svgElem.hide();
          },
        },
      },
    ],
    ...
  });
});