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

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

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.