Chart resize on redraw #1006

Oldwo1f · 2015-03-18T10:13:28Z

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 · 2015-03-18T11:17:56Z

@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 · 2015-03-18T12:02:39Z

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 · 2015-03-18T12:52:20Z

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 · 2015-03-24T04:16:23Z

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 · 2015-03-24T04:21:09Z

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 · 2015-07-07T12:12:53Z

I got the same issue, did you resolve it ?

Regards,

RemiNV · 2015-07-07T23:17:22Z

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

LuisLoureiro · 2015-08-10T21:21:21Z

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 · 2015-08-19T17:18:48Z

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

RemiNV · 2015-08-19T22:31:52Z

@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 · 2015-09-10T01:21:40Z

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 · 2016-05-05T03:31:12Z

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 · 2016-05-09T14:54:26Z

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 · 2016-06-27T17:46:58Z

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 · 2017-08-30T06:21:39Z

This is still happening in version 2.6.0

chart.destroy();

Recreating chart increases its height.

DBenS · 2017-10-28T21:10:08Z

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 · 2017-10-29T10:27:07Z

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

rolandort · 2018-01-18T17:16:28Z

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>

This was referenced Sep 18, 2015

Fix resize problems when charts are initially hidden #1467

Merged

Updated PR to replace #1467 #1470

Merged

etimberg added type: bug v1.x labels Dec 25, 2015

etimberg added the Priority: p1 label Mar 20, 2016

fulldecent closed this as completed Jun 27, 2016

fulldecent added the status: won't fix label Jun 27, 2016

dmeltzer mentioned this issue Aug 29, 2016

Dashboard Asset pie chart bug snipe/snipe-it#2514

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Chart resize on redraw #1006

Chart resize on redraw #1006

Oldwo1f commented Mar 18, 2015

etimberg commented Mar 18, 2015

Oldwo1f commented Mar 18, 2015

Oldwo1f commented Mar 18, 2015

RemiNV commented Mar 24, 2015

RemiNV commented Mar 24, 2015

EnzoHeroguel commented Jul 7, 2015

RemiNV commented Jul 7, 2015

LuisLoureiro commented Aug 10, 2015

Jedarc commented Aug 19, 2015

RemiNV commented Aug 19, 2015

msaldanha commented Sep 10, 2015

saothienhat commented May 5, 2016

silvahenrique commented May 9, 2016 •

edited

Loading

fulldecent commented Jun 27, 2016

yakuzaaaa commented Aug 30, 2017

DBenS commented Oct 28, 2017

simonbrunel commented Oct 29, 2017

rolandort commented Jan 18, 2018

Chart resize on redraw #1006

Chart resize on redraw #1006

Comments

Oldwo1f commented Mar 18, 2015

etimberg commented Mar 18, 2015

Oldwo1f commented Mar 18, 2015

Oldwo1f commented Mar 18, 2015

RemiNV commented Mar 24, 2015

RemiNV commented Mar 24, 2015

EnzoHeroguel commented Jul 7, 2015

RemiNV commented Jul 7, 2015

LuisLoureiro commented Aug 10, 2015

Jedarc commented Aug 19, 2015

RemiNV commented Aug 19, 2015

msaldanha commented Sep 10, 2015

saothienhat commented May 5, 2016

silvahenrique commented May 9, 2016 • edited Loading

fulldecent commented Jun 27, 2016

yakuzaaaa commented Aug 30, 2017

DBenS commented Oct 28, 2017

simonbrunel commented Oct 29, 2017

rolandort commented Jan 18, 2018

silvahenrique commented May 9, 2016 •

edited

Loading