Charts.js graph not scaling to canvas size

Question

I\'m trying to make a graph with Charts.js (current one is just a really simple example I\'m trying to get working, somewhat taken from the Chart.js documentation) and the g

Answer 1

The important point is: width and height properties are not the size in px but the ratio.

<canvas id="myChart" width="400" height="400"></canvas>

In this example, it's a 1:1 ratio. So, if your html contenair is 676 px width then your chart will be 676*675px
That can explain some common mistakes.

You can disable this feature by setting maintainAspectRatio to false.

Answer 2

I had this exact same problem where my graph would not resize properly. To get around this issue I did two things.

1. Set the canvas tag style to a width and height of 100%. This will make sure that it always fits 100% of its containers width and height.
2. For the options value set responsive: true & maintainAspectRatio: false. This will make sure that the graph responds to updates in size while ignoring the aspect ratio.

below is the code I used:

css
#myGraph {
width: 100%;
height: 100%;
}

html
<canvas id="myGraph" />

When you initialise the chart with the ctx set the options as below:

   

 options: {
            responsive: true,
            maintainAspectRatio: false
            }

now when you resize your screen the graph should resize accordingly. Note: The graph will fill the size of its container now so what ever you put your canvas into it will fill the size of that container.

Answer 3

In your options, set the maintainAspectRatio to false, and responsive to true. This will initially try to scale your chart to match the dimensions of your canvas. If the canvas doesn't fit the screen, i.e. on mobiles, your chart will be re-scaled to fit on the page.

window.onload=function(){
    var ctx = document.getElementById("myChart").getContext("2d");
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [1,2,3,4,5,6,7,8,9,10],
            datasets: [
                {
                    label: "My First dataset",
                    data: [1,2,3,2,1,2,3,4,5,4]
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
        }
    });
}

Answer 4

This should work. Basically, just add the width and height properties to your javascript:

var ctx = document.getElementById("myChart").getContext("2d");
ctx.canvas.width = 200;
ctx.canvas.height = 200;
var myChart = new Chart(ctx,.........

Reference: Chart.js canvas resize

Answer 5

If your <canvas> element doesn't have a width & a height "attribute" (not the css attribute). Try setting each of them them to 1 (Since its just a ratio)

<canvas id="activeUsersPieChart" width="1" height="1"></canvas>

Answer 6

The following worked for me, and I was able to keep the responsiveness of the chart!

  var ctxx = document.getElementById("myChart");
  ctxx.height = 80;