Charts.js graph not scaling to canvas size

I'm trying to make a graph with Charts.js (current one is just a really simple example I'm trying to get working, somewhat taken from the Chart.js documentation) and the graph isn't scaling to the size of the canvas I'm giving it. Here is all the relevant code.

To import it:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.min.js"></script>

Then, I connect it to a javascript file as follows:

<script type="text/javascript" src="js/stats_tab.js"></script>

I have my canvas set up:

        <div id="graph_2015" class ="stats_box">
            <h4>Graph 2015</h4>
            Text
            <canvas id="myChart" width="200" height="200"></canvas>
        </div>

And then finally in stats_tab.js, I have the following code:

window.onload=function(){
    var ctx = document.getElementById("myChart").getContext("2d");
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [1,2,3,4,5,6,7,8,9,10],
            datasets: [
                {
                    label: "My First dataset",
                    data: [1,2,3,2,1,2,3,4,5,4]
                }
            ]
        },
        options: {
        }
    });
}

The graph displays nicely, but it refuses to scale to the size of the canvas I gave it. There is also no css relevant to any of the divs involved. The inspect feature on chrome lets me know that the final graph is 676 by 676 instead of the 200 by 200 I specified. Not really sure what's going on.

Thanks!

Answers


The width and height property that you set for the canvas only work if the Chartjs' responsive mode is false (which is true by default). Change your stats_tab.js to this and it will work.

    window.onload=function(){
        var ctx = document.getElementById("myChart").getContext("2d");
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: [1,2,3,4,5,6,7,8,9,10],
                datasets: [
                    {
                        label: "My First dataset",
                        data: [1,2,3,2,1,2,3,4,5,4]
                    }
                ]
            },
            options: {
                responsive: false
            }
        });
    }

The important point is: width and height properties are not the size in px but the ratio.

<canvas id="myChart" width="400" height="400"></canvas>

In this example, it's a 1:1 ratio. So, if your html contenair is 676 px width then your chart will be 676*675px That can explain some common mistakes.

You can disable this feature by setting maintainAspectRatio to false.


In your options, set the maintainAspectRatio to false, and responsive to true. This will initially try to scale your chart to match the dimensions of your canvas. If the canvas doesn't fit the screen, i.e. on mobiles, your chart will be re-scaled to fit on the page.

window.onload=function(){
    var ctx = document.getElementById("myChart").getContext("2d");
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [1,2,3,4,5,6,7,8,9,10],
            datasets: [
                {
                    label: "My First dataset",
                    data: [1,2,3,2,1,2,3,4,5,4]
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
        }
    });
}

This should work. Basically, just add the width and height properties to your javascript:

var ctx = document.getElementById("myChart").getContext("2d");
ctx.canvas.width = 200;
ctx.canvas.height = 200;
var myChart = new Chart(ctx,.........

Reference: Chart.js canvas resize


If your <canvas> element doesn't have a width & a height "attribute" (not the css attribute). Try setting each of them them to 1 (Since its just a ratio)

<canvas id="activeUsersPieChart" width="1" height="1"></canvas>

A little late to the party, but I struggled with this problem a lot, particularly on a page with multiple charts.

This little tidbit solved it all - my charts all now fit nicely, and resize exactly with the divs they are in.

Add this to your page styles (The 8px is personal preference. Change if needed):

<style type="text/css">
    #canvas-holder {
        background-color: #FFFFFF;
        position: absolute;
        top: 8px;
        left: 8px;
        right: 8px;
        bottom: 8px;
    }
</style>

For the appropriate Divs:

<div id="canvas-holder">
    <canvas id="chart-area"></canvas>
</div>

The following worked for me, and I was able to keep the responsiveness of the chart!

  var ctxx = document.getElementById("myChart");
  ctxx.height = 80;

The real issue is that the canvas will re-scale responsively to its parent. I wanted to keep the responsiveness. So something like this will solve the issue:

<div style="width:50%">
    <canvas id="myChart"></canvas>
</div>

Need Your Help

clear textarea element

jquery textarea element

I'm curios if it's possible to clear textarea element when a div element is clicked.

Query Android SMS Log

java android sms mms telephony

Is there a way to access and query the android SMS/MMS log? To clarify, the SMS/MMS Log is all the SMS/MMS messages sent by the host phone. It can be aquired by reading a cursor to the message inbox.