Can't make chart js responsive

The answer is :

1. add a div around the canvas

for example :

<div class="wrapper">
    <canvas width="600" height="250"></canvas>
</div>

2. add height to the div class in the css

.wrapper {
height: 500px !important;
}

(adjust height as you wish the responsive rendering)

Bootstrap has an example page, which has a chart (using chartjs) that is responsive. So, I would point to that URL, which can be downloaded and we have a responsive chart.

Dasbhoard Example showing Reponsive Chart

I know this is an old post, but recently came across it.

Please check https://www.chartjs.org/docs/latest/general/responsive.html#important-note

It basically says that,

1. 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".

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

For Example,

<div class="chart-container" style="position: relative; height:40vh; width:80vw">
    <canvas id="chart"></canvas>
</div>