score:3

Accepted answer

as from docs for chart.js it's recommended to wrap canvas into container div and change width/height of the container. but basically it's changing either by given width or height.

found a more flexible custom solution from lannymcnie that can be used for any canvas responsiveness:

var stage = new createjs.stage("canvas");

var c = new createjs.shape();
c.graphics.f("#f00").dc(0,0,50); // drawn a 100x100 circle from the center

var t = new createjs.text("resize the browser/frame to redraw", "24px arial bold", "#000");
t.x = t.y = 20;
stage.addchild(c, t);

window.addeventlistener("resize", handleresize);
function handleresize() {
    var w = window.innerwidth-2; // -2 accounts for the border
    var h = window.innerheight-2;
    stage.canvas.width = w;
    stage.canvas.height = h;
    //
    var ratio = 100/100; // 100 is the width and height of the circle content.
    var windowratio = w/h;
    var scale = w/100;
    if (windowratio > ratio) {
        scale = h/100;
    }
    // scale up to fit width or height
    c.scalex= c.scaley = scale; 
    
    // center the shape
    c.x = w / 2;
    c.y = h / 2;
        
    stage.update();
}
       
handleresize(); // first draw
html, body {
    padding: 0; margin: 0;
    overflow:hidden;
}
canvas {
    border: 1px solid #f00;
}
<script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>
<canvas id="canvas" width="800" height="600"></canvas>

score:0

you can have it responsive and set a different aspect ratio. my issue was that the chart tend to be squeezed on mobile device taking barely no height.

to remedy, with chart.js 3.2.1, i am using the aspectratio option:

options: {          
   aspectratio: 1, 
}

this way the chart is square and stay square, you can play with this number usually between 0.5 to 2 to find a ratio that suits you on both displays.

score:12

  1. create class
.chart-container {
    position: relative;
    margin: auto;
    height: 80vh;
    width: 80vw;
}
  1. create div with class chart-container and place canvas tag inside it.
<div class="chart-container">
  <canvas id="canvas"></canvas>
</div>
  1. chart options, use property maintainaspectratio set to false:
options: {
    maintainaspectratio: false,
    responsive: true,  
    ...
}

Related Query

More Query from same tag