Responsive Charts

The following examples do not work:

• <canvas style="height:40vh; width:80vw">: invalid behavior, the canvas is resized but becomes blurry (example)

Detecting when the canvas size changes can not be done directly from the canvas element. Chart.js uses its parent container to update the canvas render and display sizes. However, this method requires the container to be relatively positioned and dedicated to the chart canvas only. Responsiveness can then be achieved by setting relative values for the container size ():

Note that in order for the above code to correctly resize the chart height, the option must also be set to false.