HighCharts: Line series disappears on click of legend - highcharts

Question

I've created the chart with Column and Line series, where I'm adding the series dynamically using the chart.addSeries.
Issue:
When clicking the line series legend, the line series disappears. when clicking it for the second time only the plot points are visible and line is not visible.
I'm getting following JS exception:
Line: 65
Character: 237
Code: 0
Error Message: Object doesn't support property or method 'join'
URL: http://pfmonline.fidelitypfm.com:8098/moneycenter/js/js/rbc/highcharts.js?d=1592588911
Below is the code:
chart = new Highcharts.Chart({
chart: {
renderTo: 'spendingChart',
width: spendingChart.width*0.8,
height: spendingChart.height*0.8,
plotBorderColor:'#000000',
plotBorderWidth:1
},
xAxis: {
categories: subCategories,
labels: {
rotation: 0
}
},
credits: {
enabled: false
},
tooltip: {
borderColor: '#000',
backgroundColor: '#FFF',
borderRadius: 0,
borderWidth: 1,
formatter: function() {
var s;
s = ''+this.series.name+', '+this.x +', $'+Highcharts.numberFormat(this.y,2,'.',',');
return s;
}
},
title: {
text: ''
},
yAxis: {
lineWidth: 1,
title: {
text: ''
}
},
series: []
});
for(var i=0;i<data[index].drilldown.length;i++){
if(data[index].drilldown[i].name == "Actual")
chtType = "column";
else
chtType = "spline";
subCategories = [];
versionsData = [];
var color = "";
for (var j = 0; j < data[index].drilldown[i].data.length; j++) {
versionsData.push(data[index].drilldown[i].data[j].y);
subCategories.push(data[index].drilldown[i].categories[j]);
color = (data[index].drilldown[i].data[j].color);
}
chart.xAxis[0].setCategories(subCategories, false);
chart.addSeries({type:chtType, name :data[index].drilldown[i].name, data : versionsData ,color:color},'true');
}

Answer 1

I have the same issue with the lines disappearing when clicking the legend and found the solution, apparently it was a bug involving the 2.2.5 version and jQuery 1.8. They have fixed it so if you upgrade to the latest 2.3.5 it will be fixed.
Reference: https://github.com/highslide-software/highcharts.com/issues/1189 and https://github.com/highslide-software/highcharts.com/issues/1181
Hope that helps

Answer 2

I hope you are using IE.
Since you are with arrays, check for any trailing commas.
If your IE version is < 8. Check for the IE mode. If your in quirks mode.
var test = [
["element1"],
["element2"],
["element3"],
["element4"],
["element5"],
];
Remove the trailing ,.
Alternatively, you can check either by logging or alerting the length.
console.log(test.length);
or
alert(test.length);
The length you will observe will be 6 instead of 5.