Setting data with null values doesn't remove dots from the chart

Question

I'm not sure if this is a bug or not : http://jsfiddle.net/sk3oepLb/1/ After calling setData with an array containing null values, we're left with "ghost" dots, which are not part of the chart but are still visible. The problem doesn't occur if connectNulls is false.

$(function () {
    var elem = $('#container').highcharts({
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '°C'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            connectNulls: true,
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }]
    });
    var chart = elem.highcharts();
    var series = chart.series[0];
    series.setData([null, null, 9.5, 14.5, 18.2, 21.5, 25.2, null, null, 18.3, 13.9, 9.6]);
});

Answer 1

The problem is created due to using connectNulls and updatePoints in setData. Workaround:

series.setData([null, null, 9.5, 14.5, 18.2, 21.5, 25.2, null, null, 18.3, 13.9, 9.6], true, true, false);

Meanwhile, bug reported here. Thanks!