Best IT Recipes

Resize canvas Chart.js

In ( Android WebView HTML5 web browser error ). I posted a question about plotting using the Graph.js library. The problem that I have in mind now is that if I call the function to plot the graph several times, the canvas size changes every time. Each time the chart is redrawn on the same canvas, its size also changes. I also tried setting the canvas size, but to no avail.

What could be the reason? Why does the canvas size change every time?

+77
html5 canvas
Nov 07 '13 at 22:01
source share
13 answers

I had a lot of problems with this, because after all this, my line graphics looked awful on hover and I found an easier way to do this, hope this helps :)

Use these Chart.js options:

// Boolean - whether or not the chart should be responsive and resize when the browser does. responsive: true, // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container maintainAspectRatio: false,
+159
Sep 02 '14 at 8:57
source share

What happens, Chart.js multiplies the size of the canvas when it is called, and then tries to scale it back using CSS, the purpose of which is to provide higher-resolution charts for high-resolution devices per inch.

The problem is that he does not understand that he has already done this, therefore, when he is called sequential time, he multiplies the already (doubled or any) AGAIN size until everything starts to break. (What actually happens is to check if it should add more pixels to the canvas by changing the DOM attribute for width and height, if it should, by multiplying it by some factor, usually 2, and then changing it and then changing the style css to keep the same size per page.)

For example, when you run it once, and the width and height of the canvas is 300, it sets them to 600, and then changes the style attribute to 300 ... but if you run it again, it will see that the DOM is width and height - 600 (check another answer to this question to see why) and then sets the value of 1200 and the width and height of the css to 600.

Not the most elegant solution, but I solved this problem by preserving the expanded resolution for the retina devices, simply setting the width and height of the canvas manually before each subsequent call to Chart.js

 var ctx = document.getElementById("canvas").getContext("2d"); ctx.canvas.width = 300; ctx.canvas.height = 300; var myDoughnut = new Chart(ctx).Doughnut(doughnutData);
+61
Feb 15 '14 at 13:00
source share

This works for me:

 <body> <form> [...] <div style="position:absolute; top:60px; left:10px; width:500px; height:500px;"> <canvas id="cv_values"></canvas> <script type="text/javascript"> var indicatedValueData = { labels: ["1", "2", "3"], datasets: [ { [...] }; var cv_values = document.getElementById("cv_values").getContext("2d"); var myChart = new Chart(cv_values, { type: "line", data: indicatedValueData }); </script> </div> </form> </body>

The essential fact is that we must set the size of the canvas in the div tag.

+24
Aug 30 '16 at 11:27
source share

On iOS and Android, the browser hides the toolbar when you scroll, thereby resizing the window, which causes the graphical charts to resize the graph. The solution is to maintain aspect ratio.

 var options = { responsive: true, maintainAspectRatio: true }

This should solve your problem.

+18
Jan 28 '15 at 6:01
source share

As jcmiller11 suggested, setting the width and height helps. A slightly nicer solution is to extract the width and height of the canvas before drawing the chart. Then use these numbers to set the chart for each subsequent re-drawing of the chart. This ensures that there are no constants in the javascript code.

 ctx.canvas.originalwidth = ctx.canvas.width; ctx.canvas.originalheight = ctx.canvas.height; function drawchart() { ctx.canvas.width = ctx.canvas.originalwidth; ctx.canvas.height = ctx.canvas.originalheight; var chartctx = new Chart(ctx); myNewBarChart = chartctx.Bar(data, chartSettings); }
+6
May 05 '14 at
source share

I should have used a combination of several answers here with some minor changes.

First, you need to place the canvas element in a block-level container. I tell you: do not let the canvas element have siblings; let it be a lonely child, because he is stubborn and spoiled. (The wrapper may not need any size restrictions, but for security it may be useful to apply a maximum height to it.)

After making sure that the previous conditions are met, when starting the chart, make sure that the following parameters are used:

 var options = { "responsive": true, "maintainAspectRatio": false }

If you want to adjust the height of the chart, do it at the canvas element level.

 <canvas height="500"></canvas>

Do not try to communicate with the child in any other way. This should lead to a satisfactory, properly laid out schedule, which lies peacefully in its crib.

+4
Feb 13 '18 at 16:08
source share

I had a similar problem and found your answer. In the end, I came to a decision.

It seems that the source of Chart.js has the following (presumably because it should not re-display a completely different chart in the same canvas):

  //High pixel density displays - multiply the size of the canvas height/width by the device pixel ratio, then scale. if (window.devicePixelRatio) { context.canvas.style.width = width + "px"; context.canvas.style.height = height + "px"; context.canvas.height = height * window.devicePixelRatio; context.canvas.width = width * window.devicePixelRatio; context.scale(window.devicePixelRatio, window.devicePixelRatio); }

This is fine if it is called once, but when you redraw several times, you end up resizing the canvas DOM element several times, causing a resize.

Hope this helps!

+3
Feb 06 '14 at 19:25
source share

If someone is having problems, I found a solution that does not require a response, etc.

Just close your canvas in the div container (no styles) and reset the contents of the div to an empty canvas with an identifier before calling the chart constructor.

Example:

HTML:

 <div id="chartContainer"> <canvas id="myChart"></canvas> </div>

JS:

 $("#chartContainer").html('<canvas id="myChart"></canvas>'); //call new Chart() as usual
+1
May 25 '17 at 14:42
source share

I tried to resize the canvas using jQuery, but it did not work well. I think CSS3 is the best option you can try on if you want to hover over a specific level.

The following hover option from another link to the code panel:

 .style_prevu_kit:hover{ z-index: 2; -webkit-transition: all 200ms ease-in; -webkit-transform: scale(1.5); -ms-transition: all 200ms ease-in; -ms-transform: scale(1.5); -moz-transition: all 200ms ease-in; -moz-transform: scale(1.5); transition: all 200ms ease-in; transform: scale(1.5); }

Follow my link to the code panel:

https://codepen.io/hitman0775/pen/XZZzqN

+1
Feb 20 '18 at 5:22
source share

I had a scaling issue using the Angular CLI. I was able to get it working by removing this line from index.html:

 <script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>

and then in the angular-cli.json file in the script section using this:

 "scripts": ["../node_modules/chart.js/dist/Chart.bundle.min.js"]

Source : mikebarr58

0
May 08 '17 at 9:06 a.m.
source share

I had the same problem. I was able to solve this by setting the option:

 responsive: false, maintainAspectRatio: true, showScale: false,

And in css set the width of the div container just like canvas:

  #canvasContainer { width: 300px; } canvas { width: 300px; }
0
Jul 25 '19 at 13:33
source share

Add a div and this will solve the problem

 <div style="position:absolute; top:50px; left:10px; width:500px; height:500px;"></div>
-2
May 15 '19 at 5:25
source share
  let canvasBox = ReactDOM.findDOMNode(this.refs.canvasBox); let width = canvasBox.clientWidth; let height = canvasBox.clientHeight; let charts = ReactDOM.findDOMNode(this.refs.charts); let ctx = charts.getContext('2d'); ctx.canvas.width = width; ctx.canvas.height = height; this.myChart = new Chart(ctx);
-5
Jan 31 '16 at 11:40
source share


More articles:


All Articles