CODEWITHSUNDEEP
javascripthighcharts
Poles
Poles

Reputation: 3682

remove series by name or id in highcharts

Is there anyway to remove a series by name or id? I mean it is possible to remove series by this.remove()

or

var seriesLength = chart.series.length;
for(var i = seriesLength - 1; i > -1; i--) {
    chart.series[i].remove();
}

but by name say, series_name.remove() is it possible?

Upvotes: 11

Views: 31306

Answers (5)

mnishiguchi
mnishiguchi

Reputation: 2241

These two simple solutions work for me.

UPDATE : I realized I misunderstood the question. These solutions remove all the legends.

Hide it using jQuery

$(function () {
  // Build the chart.
  $('#volume_pie_chart').highcharts({
      // Some configuration code...
    })
    
    // Hide the legend.
    $('.highcharts-legend').hide()
});

Position the legend so that we do not see it

...
},
legend: {
    x: 9999, // Make the legend invisible.
    y: 9999
},
...

Upvotes: 1

Faisal Feroz
Faisal Feroz

Reputation: 12785

HighCharts 6.x.x

You can get the Series object by Id using Chart::get method. Heres the link for documentation - https://api.highcharts.com/class-reference/Highcharts.Chart#get

Also Series has a remove method to remove the series from the chart - https://api.highcharts.com/class-reference/Highcharts.Series#remove

Upvotes: 0

lcguida
lcguida

Reputation: 3847

Well, I don't know if at the time it was possible, but now you have a get function in the chart object to which you can pass an id and retrieve an element within the chart.

For example:

var chart = new Highcharts.Chart({    
    chart: { renderTo: 'container' },
    series: [
      {
        id: 'series-1', 
        data: [1,2,3,4,5,6,7,8,9]
      },
      {
        id: 'series-2',
        data: [9,8,7,6,5,4,3,2,1]
      }
    ]
});

//Remove the 'series-2'
chart.get('series-2').remove();

Working example in jsfiddle

Upvotes: 19

Joejoe
Joejoe

Reputation: 11

This needs more visibility, because this is fairly janky. You could probably just iterate through the series and check the .name against your "passed in name" instead of scanning the document for "series_name".

There really should be a chart.remove(series) (not just index, because the indices remap after you remove one).

Upvotes: 1

Poles
Poles

Reputation: 3682

Ok, I found it myself. I send the series name in a hidden field of a div and when I click the delete button I'm checking if the name matches among the series and if match found I delete it. 

var chart = $('#container').highcharts();
                var seriesLength = chart.series.length;
                for(var i = seriesLength - 1; i > -1; i--)
                {
                    //chart.series[i].remove();
                    if(chart.series[i].name ==document.getElementById("series_name").value)
                        chart.series[i].remove();
                }

Upvotes: 11

Related Questions