Closed Oldwo1f closed 8 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?
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.
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
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)
I got the same issue, did you resolve it ?
Regards,
As I noted earlier, you can avoid this problem by setting the chart canvas to "display: block" (this worked for me)
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
@RemiNV see it: https://jsfiddle.net/jedarc/dgoxydzc/3/ I use this: chart.render(true);
@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.
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.
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:
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%;}
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.
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:
This is still happening in version 2.6.0
chart.destroy();
Recreating chart increases its height.
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.
@yakuzaaaa @DBenS can you guys provide a jsfiddle that reproduce this issue with Chart.js 2.7.1?
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>
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