Wrap the element inside a wrapper and set its max-width to be 80% or as desired.

Turn off responsiveness.

Check out this fiddle and let me know whether you are still getting bloated chart on clicking re-renders.

<div class="wrapper">
    <canvas id="graph1" width="300" height="300"></canvas>

    <canvas id="graph2" width="250" height="250"></canvas>

    <canvas id="graph3" width="250" height="250"></canvas>  

.wrapper {
   max-width: 80%;


I had the same behaviour defining padding definition to my canvas. I removed padding and I have no resizing now.

Related Query

More Query from same tag