Chart.js not height responsive

       1. Create Class

        .chart-container {
        position: relative;
        margin: auto;
        height: 80vh;
        width: 80vw;
        }

        2. Create Div With class chart-container and place canvas tag inside it.

        <div class="chart-container">
        <canvas id="canvas"></canvas>
        </div>

        3. Chart options :- Use property maintainAspectRatio: false,

        options: {
        maintainAspectRatio: false,
        responsive: true, 
...... 

        }

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>

Tags:

Javascript

Charts

Chart.Js

Recent Posts