c3 JS scroll bar jumping when loading new data

We are using c3 as a wrapper around d3 javascript charting library. You can see even in their own demo when the data is updated the scroll bar flickers momentarily.

This isn't a problem when there is already a scrollbar on the page as it is in their case. But if the page is smaller the addition and sudden removal or the scrollbar can be jarring.

We aren't doing anything wildly different than they do in their examples. The mystery is why the scrollbars jump. Any ideas? If you want to look at my code it is blow:

Data is getting passed to our AngularJS Directive using SignalR

$scope.$watch('data', function () {
    normalizedData = normalize($scope.data);

    chart.load({
        columns: getChartDataSet(normalizedData)
    });
});

After we take the normalized data it simply gets set into an array then passed to C3

var chart = c3.generate({
    bindto: d3.select($element[0]),
    data: {
        type: 'donut',
        columns: [],
        colors: {
            '1¢': '#2D9A28',
            '5¢': '#00562D',
            '10¢': '#0078C7',
            '25¢': '#1D3967',
            '$1': '#8536C8',
            '$5': '#CA257E',
            '$10': '#EC3500',
            '$20': '#FF7D00',
            '$50': '#FBBE00',
            '$100': '#FFFC43'
        }
    },
    tooltip: {
        show: true  
    },
    size: {
        height: 200,
        width: 200
    },
    legend: {
        show: true,
        item: {
            onmouseover: function (id) {
                showArcTotal(id);
            },
            onmouseout: function (id) {
                hideArcTotal();
            }
        }
    },
    donut: {
        width: 20,
        title: $scope.label,
        label: {
            show: false,
            format: function(value, ratio, id) {
                return id;
            }
        }
    }
});

Solution

When C3 draws the chart it appends an SVG at the bottom of the <body> element, even with `style="visibility:hidden". I just added a CSS class

body > svg { height:0px !important }

That fixed the issue for me.