Oldwo1f commented 9 years ago

Hi I got the same issue as in 713 and 759

But the quick fix ( comment out the line helpers.retinaScale(this); ) doesnt work me (even on chrome or firefox).

My line Chart still increase his own size each time i redraw it (on browser resize or on data change).

Any idea of how to fix that?

Thanks

etimberg commented 9 years ago

@Oldwo1f Can you create a JSBin of the issue? Are you recreating the chart each time? If so, did you use 'destroy' on the old chart?

Oldwo1f commented 9 years ago

hi thanks for your answer

No i am not recreating the chart each time . I ll try to isolate the problem and give you a jsfiddle.

Oldwo1f commented 9 years ago

The thing is: I use angular-chart.js and it seem to not work with jsfiddle. I copie/paste you a simple exemple of the error, but you ll need to install dependencie in order to run it. -----> bower install jquery angular Chart.js angular-chart.js

You can reproduce the bug by resizing browser window. You ll see the chart increasing his height. on each redraw. So it ll become very tall very very fast

<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/angular/angular.min.js"></script>
<script src="/bower_components/Chart.js/Chart.js"></script>
<script src="/bower_components/angular-chart.js/dist/angular-chart.js"></script>

<body ng-app="app" ng-controller="LineCtrl">
<h1>TEST</h1>
<div style="width:600px;height:400px; margin:50px auto;position:relative;">
<canvas id="line" class="chart chart-line" options="myoptions" data="data" height="300px" labels="labels" 
    legend="true" series="series" click="onClick"></canvas> 
</div>

<a class="toto" href="#" >click to change data</a>
<script type="text/javascript">

angular.module("app", ["chart.js"]).controller("LineCtrl", ['$scope', '$timeout', function ($scope, $timeout) {

  $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
  $scope.series = ['Series A', 'Series B'];
  $scope.myoptions = {scaleBeginAtZero : true,maintainAspectRatio: false,scaleShowGridLines : false}
  $scope.data = [
    [65, 59, 80, 81, 56, 55, 40],
    [28, 48, 40, 19, 86, 27, 90]
  ];
  $scope.onClick = function (points, evt) {
    console.log(points, evt);
  };

  // Simulate async data update
  $('.toto').click(function () {
    console.log('clicked');
    $scope.data = [
      [90, 48, 40, 19, 86, 27, 90],
      [65, 59, 80, 81, 56, 55, 40]
    ];
    $scope.$apply();
  });
}]);

</script>
</body>

RemiNV commented 9 years ago

Not sure if the cause is the same, but here is a jsFiddle with the same symptoms: https://jsfiddle.net/dgoxydzc/2/

Please click the "resize" button several times. I believe the cause is related to this question: http://stackoverflow.com/questions/8600393/there-is-a-4px-gap-below-canvas-video-audio-elements-in-html5

RemiNV commented 9 years ago

Setting the chart canvas to display: block; was a good workaround for me. Note that I only get this bug with maintainAspectRatio=false (as in Oldwo1f's example)

EnzoHeroguel commented 9 years ago

I got the same issue, did you resolve it ?

Regards,

RemiNV commented 9 years ago

As I noted earlier, you can avoid this problem by setting the chart canvas to "display: block" (this worked for me)

LuisLoureiro commented 9 years ago

I use angular-chartjs too and I had the same issue. I solved it by setting the height of the 'canvas' element. I'm using version 0.7.3 of angular-chart.js and version 1.0.2 of Chart.js. Btw, the display:block didn't solve my problem.

Regards

Jedarc commented 9 years ago

@RemiNV see it: https://jsfiddle.net/jedarc/dgoxydzc/3/ I use this: chart.render(true);

RemiNV commented 9 years ago

@Jedarc I still see the same issue in the jsfiddle you provided. Does rendering the chart one extra time at each resize fix it in your case ? This would have bad performance if you are reacting to many resize events, so I don't think this is a good option anyway.

msaldanha commented 9 years ago

I'm using Chart.js v1.0.2 and angular-chart.js v0.7.6. Commenting out the line helpers.retinaScale(this); did not work for me, neither using display:block. After each redraw, the graph always increases its height in 40px. What I found while debugging was that the Charts.js's constructor gets the value returned by computeDimension function and assign it to the canvas' height. The problem, in my case, was that computeDimension returns the offsetHeight and this value did happen to be always greater than the canvas' height property. The docs say offsetHeight includes padding and borders so I checked my canvas element and it was using a padding of 20px. After setting the padding to 0px the problem was gone.

saothienhat commented 8 years ago

I faced the same issue and I fount that one reason why height of chart is changed is (this.endPoint - this.startPoint). In my case, I added many X-Labels for chart and it causes of problem. Detail:

Add many dump X-Labels such as 0.331, 1.485, etc. These added dump data are calculated base on existed real data (0, 0.33, 1, 1.1, etc.).
During calculating, there are many dump data are generated which has length is so long such as 0.33460000003, etc. They are result of normal adding 2 float value in JS such as (0.33 + 0.016 = 0.3460000003). These float value cause the problem:
- In Chart.js, the height of chart is based on (this.endPoint – this.startPoint). The this.startPoint is fixed by line 1486: “this.startPoint = (this.display) ? this.fontSize : 0;“  the height is based on this.endpoint.
- When Chart.js call calculateXLabelRotation() method, it changes this.endPoint value at line 1572: “this.endPoint -= Math.sin(toRadians(this.xLabelRotation))*originalLabelWidth + 3;”. The result based on originalLabelWidth parameter which is generated at line 1546: “var originalLabelWidth = longestText(this.ctx, this.font, this.xLabels),”.
- The way of generating originalLabelWidth with input is this.xLables using longestText(…) method. It mean: this.endPoint based on the longest xLabel in this.xLabels parameter. If we has some so long xLabel such as 0.334600003  this.endPoint is small  height of chart is small
Solution: get 3 number after 0 of one float value when add dump data using: parseFloat(floatValue.toFixed(3)) , Ex: (0.33 + 0.016 = 0.346)

silvahenrique commented 8 years ago

I'm testing chartjs, this is my .js file copied from the website: var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: 'radar', data: { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [ { label: "My First dataset", backgroundColor: "rgba(255,99,132,0.2)", borderColor: "rgba(255,99,132,1)", borderWidth: 1, hoverBackgroundColor: "rgba(255,99,132,0.4)", hoverBorderColor: "rgba(255,99,132,1)", data: [65, 59, 80, 81, 56, 55, 40], } ] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] } } });

Why when I try to change the size of the chart via css it doesn't work? This is my css: html{width: 100%; height: 100%;margin: 0; padding: 0;} body {width: 100%; height: 100%;}

myChart {

width: 100px; height: 100px; }

My screen just keep blinking when I refresh the browser. I've tried other different types of chart and the same happened.

fulldecent commented 8 years ago

Hello, today I am closing all issues that are only affecting version 1 of Chart.js as WONTFIX.

If this issue does affect version 2 as well, I apologize for the error. Please create a test case against Chart.js 2 using on of the below websites and we will be happy to reopen the issue and update its classification:

http://jsbin.com/
http://jsfiddle.net/
http://codepen.io/pen/
Premade template: http://codepen.io/pen?template=JXVYzq

yakuzaaaa commented 7 years ago

This is still happening in version 2.6.0

chart.destroy();

Recreating chart increases its height.

DBenS commented 6 years ago

Yap! The same results in line chart... but just in this type. Everytime I refresh browser when the chart is being displayed, the chart increases its height. If the chart is not shown (I use a function linked to events to start it), the problem does not occurs.

simonbrunel commented 6 years ago

@yakuzaaaa @DBenS can you guys provide a jsfiddle that reproduce this issue with Chart.js 2.7.1?

dumboxp commented 6 years ago

I had the same issue of a resizing canvas with Chart.js/2.7.1/Chart.bundle.js when redrawing a chart after changing its type using :

function changeChartType(type) {
        var ctx = $("#chart1").get(0).getContext("2d");
        var temp = jQuery.extend(true, {}, chart1.config);
        temp.type = type;
        chart1.destroy();
        chart1 = new Chart(ctx, temp);
}

I could only solve it by adding a div around the canvas and setting Chart.defaults.global.maintainAspectRatio = false;

  <div style="width: 600px; height: 300px;">
    <canvas id="chart1" style="width: 600px; height: 300px;"></canvas>
  </div>

chartjs / Chart.js

Chart resize on redraw #1006

myChart {