Loading Multiple Series in Highcharts dynamically returns errors

Question

I am trying to implement a Highcharts chart to dynamically load new series to the same chart in .NET MVC. I just need to group the same data set into several groups based on some attributes and display these groups as multiple series. Selecting the attribute for grouping is done using radio buttons. I have written an 'on change' event handler using Jquery. To load the multiple series I have removed all the current series and added new ones. But they return two errors.

while (chart.series.length > 0) {
           chart.series[0].remove(false);
 }
 chart.redraw();

This block destroys the existing series. But it returns the error below.

Uncaught TypeError: Cannot read property 'isSVG' of undefined
    at a.SVGElement.destroy (highcharts.js:53)
    at highcharts.js:212
    at Array.forEach (<anonymous>)
    at a.each (highcharts.js:28)
    at a.Legend.destroyItem (highcharts.js:212)
    at k.destroy (highcharts.js:286)
    at d (highcharts.js:316)
    at a.fireEvent (highcharts.js:31)
    at k.remove (highcharts.js:316)
    at k.remove (highcharts.js:334)
destroy @ highcharts.js:53
(anonymous) @ highcharts.js:212
a.each @ highcharts.js:28
destroyItem @ highcharts.js:212
destroy @ highcharts.js:286
d @ highcharts.js:316
a.fireEvent @ highcharts.js:31
remove @ highcharts.js:316
remove @ highcharts.js:334
(anonymous) @ StackedChart:285
dispatch @ jquery-1.10.2.js:5109
elemData.handle @ jquery-1.10.2.js:4780

The following is the code to load the new series.

if (i != (workCenterData.length - 1))
      chart.addSeries({ data: dataArray }, false);
else
      chart.addSeries({ data: dataArray }, true);

This block returns the following error.

Uncaught TypeError: Cannot read property 'setAttribute' of undefined
    at a.SVGElement.fillSetter (highcharts.js:59)
    at a.SVGElement.<anonymous> (highcharts.js:43)
    at a.objectEach (highcharts.js:29)
    at a.SVGElement.attr (highcharts.js:42)
    at a.Legend.colorizeItem (highcharts.js:212)
    at a.Legend.renderItem (highcharts.js:217)
    at highcharts.js:220
    at Array.forEach (<anonymous>)
    at a.each (highcharts.js:28)
    at a.Legend.render (highcharts.js:220)
fillSetter @ highcharts.js:59
(anonymous) @ highcharts.js:43
a.objectEach @ highcharts.js:29
attr @ highcharts.js:42
colorizeItem @ highcharts.js:212
renderItem @ highcharts.js:217
(anonymous) @ highcharts.js:220
a.each @ highcharts.js:28
render @ highcharts.js:220
redraw @ highcharts.js:232
C @ series-label.js:9
a.(anonymous function) @ highcharts.js:19
(anonymous) @ highcharts.js:307
a.fireEvent @ highcharts.js:31
addSeries @ highcharts.js:306
(anonymous) @ StackedChart:314
dispatch @ jquery-1.10.2.js:5109
elemData.handle @ jquery-1.10.2.js:4780

I tried both these methods of destroying and then regenerating the new series on a button click on a normal HTML page and it works. Maybe this has something to do with .NET. Because I referred many forums and they recommend these methods. Sorry I can't include a fiddle since my data is taken from a database. Any ideas how to do the dynamic loading or getting rid of these errors ?

Arshad Fauzil Arshad Fauzil · Accepted Answer · 2017-10-31T05:25:32

Never mind, I added a fake legend item to appear as the legend title, but I had also written a function to destroy this legend title's symbol. Commenting out this function did the trick. It works the way I want it to now.

Loading Multiple Series in Highcharts dynamically returns errors

1 Answers