Oldwo1f
All 18 comments
@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?
etimberg
on 18 Mar 2015
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
on 18 Mar 2015
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>
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
on 24 Mar 2015
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)
RemiNV
on 24 Mar 2015
I got the same issue, did you resolve it ?
Regards,
EnzoHeroguel
on 7 Jul 2015
As I noted earlier, you can avoid this problem by setting the chart canvas to "display: block" (this worked for me)
RemiNV
on 8 Jul 2015
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
LuisLoureiro
on 10 Aug 2015
@RemiNV see it: https://jsfiddle.net/jedarc/dgoxydzc/3/
I use this: chart.render(true);
Jedarc
on 19 Aug 2015
@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.
RemiNV
on 20 Aug 2015
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.
msaldanha
on 10 Sep 2015
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)
saothienhat
on 5 May 2016
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.
henriquewinchester
on 9 May 2016
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:
fulldecent
on 27 Jun 2016
This is still happening in version 2.6.0
chart.destroy();
Recreating chart increases its height.
yakuzaaaa
on 30 Aug 2017
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.
DBenS
on 28 Oct 2017
@yakuzaaaa @DBenS can you guys provide a jsfiddle that reproduce this issue with Chart.js 2.7.1?
simonbrunel
on 29 Oct 2017
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>
dumboxp
on 18 Jan 2018
Related issues
nickgoodliff
·
3Comments
adriantombu
·
3Comments
HeinPauwelyn
·
3Comments
SylarRuby
·
3Comments
Woogles
·
3Comments
Most helpful comment
I had the same issue of a resizing canvas with
Chart.js/2.7.1/Chart.bundle.jswhen redrawing a chart after changing its type using :I could only solve it by adding a div around the canvas and setting
Chart.defaults.global.maintainAspectRatio = false;