Highcharts legend hiding wrong data

Question

The legend in my highcharts is not functioning correctly. I have 2 series, each named differently. When I click on 'series1' on the legend, the data for 'series1' is hidden leaving 'series2' behind. However, when I click on 'series2' first, all the data is hidden instead of only 'series2'. What are some common mistakes that could lead to this? Here is a snippet of the involved code:

EDIT: Here is a jsFiddle reproduction of my bug. You can see when you click on "Pool" in the legend both series are removed. Clicking on client, however, works as expected. https://jsfiddle.net/LLExL/5616/

EDIT2: I found the solution. Apparently if the first index of a given series of data is empty, the error occurs. It also appears that it must have the same number of elements equal to the index with the least amount of data points. So in my case, I check if the first element in clientChartData or poolChartData is empty, if so I append 5 pairs of quotes to that array.

$('#all-cpus').highcharts({
            chart: {
                type: 'boxplot',
                inverted: true
            },
            title: {
                text: 'All CPUs'
            },
            xAxis: {
                title: { text: 'Hybrids' }
            },
            yAxis: {
                title: { text: 'Yield' }
            },
            legend: { enabled: true },
            credits: { enabled: false },
            tooltip: {},
            plotOptions: {
                boxplot: {
                    fillColor: '#6c3a38',
                    lineWidth: 3,
                    medianWidth: 3,
                    stemColor: '#DF5353',
                    stemDashStyle: 'dot',
                    stemWidth: 1,
                    whiskerColor: '#AAEEEE',
                    whiskerLength: '20%',
                    whiskerWidth: 3
                }
            },
            series: [
                { name: 'Client' },
                { name: 'Pool' }
            ]
    });

Here is where I set the chart data. Assume organizedClientData as all the data I need.

    //Set the data to be displayed on the chart
    clientChartData = organizedClientData;

    $chart.highcharts().series[0].setData(clientChartData, false);
    $chart.highcharts().series[0].update({name: this.clientData.name}, false);

    $chart.highcharts().series[1].setData(poolChartData, false);
    $chart.highcharts().series[1].update({name: this.poolData.name}, false);

    //Set tooltip info to reflect dynamic data and to include acres
    $chart.highcharts().tooltip.options.formatter = function() {
        var index          = this.point.x;
        var numAcresPool   = poolAcres[ index ];
        var numAcresClient = clientAcres[ index ];

        var tooltipString = this.point.category     + '<br>'            +
                            this.point.series.name  + '<br>'            +
                            'Max: '                 + this.point.high   + '<br>' +
                            'Upper Quartile: '      + this.point.q3     + '<br>' +
                            'Median: '              + this.point.median + '<br>' +
                            'Lower Quartile: '      + this.point.q1     + '<br>' +
                            'Min: '                 + this.point.low    + '<br>';

        //Handle client vs. pool acreage display, and check if on the 'All Cpus' tab
        if(this.point.series.name == 'Pool') {
            tooltipString = tooltipString + 'Acres: ' + numAcresPool;
        }
        else if(this.point.series.name == 'All Farms' /*&& $chart.selector != '#all-cpus'*/) {
            tooltipString = tooltipString + 'Acres: ' + numAcresClient;
        }

        return tooltipString;
    };

    var xaxis = $chart.highcharts().xAxis[0];
    var title = { text: this.getProfileData().cropId == 1 ? 'Hybrids' : 'Varieties' };

    xaxis.setCategories(categories, true);
    xaxis.setTitle(title, true);

    $chart.highcharts().setSize( $chart.parent().width() - 15,     $chart.highcharts().xAxis[0].categories.length * 50 + 150 );
    $chart.highcharts().redraw();

Could you recreate your example as live demo on the jsfiddle.net with all hardcoded options / series ? — Sebastian Bochan
@SebastianBochan I've edited my post and included the js fiddle. Here it is: jsfiddle.net/LLExL/5615 — IanKZ

Sebastian Bochan Sebastian Bochan · Accepted Answer · 2016-01-20T10:01:12

This looks like a bug, I reported that to our developers here: https://github.com/highcharts/highcharts/issues/4939

Highcharts legend hiding wrong data

1 Answers