title: c3 JS scroll bar jumping when loading new data
body: <p>We are using c3 as a wrapper around d3 javascript charting library. You can see even <a href="http://c3js.org/samples/chart_donut.html" rel="nofollow">in their own demo</a> when the data is updated the scroll bar flickers momentarily.</p>
  
  <p>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.</p>
  
  <p>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:</p>
  
  <hr>
  
  <p>Data is getting passed to our AngularJS Directive using SignalR</p>
  
  <pre><code>$scope.$watch('data', function () {
      normalizedData = normalize($scope.data);
  
      chart.load({
          columns: getChartDataSet(normalizedData)
      });
  });
  </code></pre>
  
  <p>After we take the normalized data it simply gets set into an array then passed to C3</p>
  
  <pre><code>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;
              }
          }
      }
  });
  </code></pre>