javascriptchart.jsresponsive

Can't make chart js responsive

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.

Solution

  • 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)