Extra Labels on Stacked Column After Label Toggle and Resize

Question

I am working on an application that uses Highstock to display several series over time. These series are stacked.

With a lot of data points, the data labels can get messy. I added a checkbox to toggle the stackLabels.enabled property of the yaxis using the following:

function toggleDataLabels(enableDataLabels) {
    var chart = $('#container').highcharts();

    chart.yAxis.forEach(function (axis) {
        axis.update({
            stackLabels: {
                enabled: enableDataLabels
            }
        });
    });
};

This works as expected. Hides when asked, shows when asked.

The issue that I am facing is, after the property has been set to false then back to true THEN the chart resizes, there is a bunch of extra data labels added to the canvas.

After this bug has been activated, you can hide all series via the legend and the labels are still on the canvas.

I have tried:
- disabling the data labels on each series after stack set to true
- programmatically setting/calling redraw, reflow, setsize
- axis.update on both x and y
- and several other hacky approaches

Nothing I have tried can get these extra data labels to go away.

Check out this fiddle http://jsfiddle.net/d84dgrs9/ (kinda rough, but it gets the point across)
steps to produce the bug:
- choose: 1m from the range selector to reduce clutter
- uncheck Toggle Data Labels to hide the data labels
- check Toggle Data Labels to show the data labels
- resize panes with vertical slider
BOOM! all kinds of extra labels.

Any insight would be amazing. Maybe this is something to report back to the highcharts bug tracker.

Charles Clayton Charles Clayton · Accepted Answer · 2015-11-17T18:25:14

Weird problem. I think it'd probably be worth reporting as a bug.

Anyway, I found a workaround. If you use CSS to hide/show the labels instead of highcharts options, the extra labels don't reappear. As an added bonus, it works much faster.

function toggleDataLabels(enableDataLabels) {
    if (enableDataLabels) 
        $('g.highcharts-stack-labels').css('visibility', 'visible');
    else 
        $('g.highcharts-stack-labels').css('visibility', 'hidden');
};

JSFiddle

Extra Labels on Stacked Column After Label Toggle and Resize

1 Answers