Chart.JS resizing chart on every update


#1

I have Chart.js library in my index.html and in a view I have:

<div class="list card">
  <label class="item item-input">
    <input type="text" placeholder="10hr" ng-model="schedule.name" >
  </label>
  
  <div class="item item-image">
  	<canvas id="editChart" width="300" height="200"></canvas>
  </div>
......

The problem is everytime I try to update on data change the chart gets bigger and bigger:

$scope.updateChart = function() {
        $scope.myLineChart = new Chart($scope.ctx).Line($scope.data,$scope.options)

    };

Is it because I am calling nw Chart instead of trying to update the existing one somehow?

The chart draws fine the first time - and I also tried setting responsive to off in the chart.js options

$scope.options = { responsive: false,  scaleFontSize: 6, showTooltips:false, pointDot : false, datasetStrokeWidth : 1, datasetFill : false, scaleShowGridLines : false};

#2

This resolved my problem:

$scope.updateChart = function() {
for (var i =0 ; i< $scope.data.datasets.length; i++) {
for (var p =0 ; p< $scope.data.datasets[i].data.length; p++) {
$scope.myLineChart.datasets[i].points[p].value = $scope.data.datasets[i].data[p];
};

};
$scope.myLineChart.update();
// $scope.myLineChart = new Chart($scope.ctx).Line($scope.data,$scope.options)

};