Accepted answer

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--)
                    if(chart.series[i].name ==document.getElementById("series_name").value)


HighCharts 6.x.x

You can get the Series object by Id using Chart::get method. Heres the link for documentation -

Also Series has a remove method to remove the series from the chart -


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).


These two simple solutions work for me.

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

Hide it using jQuery

$(function () {
  // Build the chart.
      // Some configuration code...

    // Hide the legend.

Position the legend so that we do not see it

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


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'

Working example in jsfiddle

Related Query

More Query from same tag