Can't make chart js responsive

Question

sorry if I missed anything to fix my issue, I've read and tried many solutions without any of them being adapted to the problem.

I have several charts (from chart.js) on a single page, but I can't succeed to make them responsive, despite :

responsive: true,

The best responsive display I could get was when enlarging canvas width and height, but on the desktop version charts were displayed the entire screen.

Here is a fiddle.net

Anybody to help me ? Thank you very much.

Answer 1

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)