"Responsive" Chart.js chart is taller than the containing window

by

đź‘Ť:0

I think it’s a good idea using the viewport height on your case. That’s fairly easy in Javascript:

<html>
<head>
    <meta charset="utf-8"/>
    <title>TEST</title>
    <style>
        * {padding: 0; height: 0;}
        canvas { width: 100%; }
    </style>
</head>

<body>
<canvas id="chart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<script>
    var data = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [
            {
                label: "My First dataset",
                fillColor: "rgba(220,220,220,0.2)",
                strokeColor: "rgba(220,220,220,1)",
                pointColor: "rgba(220,220,220,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: [65, 59, 80, 81, 56, 55, 40]
            },
            {
                label: "My Second dataset",
                fillColor: "rgba(151,187,205,0.2)",
                strokeColor: "rgba(151,187,205,1)",
                pointColor: "rgba(151,187,205,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(151,187,205,1)",
                data: [28, 48, 40, 19, 86, 27, 90]
            }
        ]
    };
    var ctx = document.getElementById("chart").getContext("2d");
        ctx.canvas.style.height = window.innerHeight;
    var myLineChart = new Chart(ctx).Line(data);


</script>
</body>

</html>

đź‘Ť:0

The key seems to be in these three changes:
1) Not using the “responsive: true” option provided by the library
2) Setting both the width AND height explicitly
3) Setting the height to 90% instead of 100% of window.innerHeight, as otherwise it still is taller than the containing window. 

var ctx = document.getElementById("chart").getContext("2d");
ctx.canvas.width = window.innerWidth; 
ctx.canvas.height = window.innerHeight * 0.9; 
var myLine1 = new Chart(ctx).Line2Y(lineChartData1, { scaleBeginAtZero: true, scaleShowGridLines: false, scaleShowLabels: true, showTooltips: true, tooltipTemplate: "<%= datasetLabel %>: <%= value %>" });

Leave a comment