CODEWITHSUNDEEP
highcharts
user2130898
user2130898

Reputation: 41

HighCharts: Line series disappears on click of legend

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');
    }

Upvotes: 2

Views: 1762

Answers (2)

Reina
Reina

Reputation: 315

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

Upvotes: 1

Gopinagh.R
Gopinagh.R

Reputation: 4916

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.

Upvotes: 0

Related Questions