Why is chart.js canvas not respecting the padding of the container element?

Question

I am using Chart.js with a simple line chart but the width and height properties calculated by Chart.js seem to be based on the total width and height of the parent element ignoring padding.

var options = {
    maintainAspectRatio: false,
    responsive: true
};

var data = {
    labels: ["", "", "", "", "", "", ""],
    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 ctx1 = document.getElementById("mychart1").getContext("2d");
var myNewChart = new Chart(ctx1).Line(data, options);

.container {
    padding: 15px 15px 15px 15px;
    width: 300px;
    height: 200px;
    border: 1px solid black;
}

.child {
    display: inline-block;
    border: 1px solid red;
    width:100%;
    height:100%;
}

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


<div class='container'>
    <canvas id='mychart1' class='child'></canvas>
</div>
<br>
<div class='container'>
    <div class='child'>test</div>
</div>

JSFiddle

The second container and child shows the behaviour I am expecting. Is this a bug with how Chart.js calculates the width and height of the canvas or am I making a styling mistake?

Solution 1

I also needed a responsive canvas and had this issue. This was my fix:

<div>
    <canvas id="chart"></canvas>
</div>

Since Chart.js scales the canvas to the width of the container, ignoring the padding, I just wrapped the canvas in a div. The div scales to the container with padding, respecting the padding, and then the responsive Chart.js canvas scales to the div.

Solution 2

I too googled for this problem and ended up with a simple solution.

I added height so that it automatically adjust the width accordingly and show it in a nicer way. If u really want you could add width too. The canvas element is part of HTML5.

It does not allow you to input values with px. So ignore that and just type tha numerical value u need.

 <canvas id="myChart" height="80"></canvas>

Solution 3

In your jsfiddle example change the responsive attribute to false:

var options = {
    maintainAspectRatio: true,
    responsive: false
};

The previous setting added a additional 30px to both the height and width when you inspect the element using Chrome dev tools. Because of the size of the canvas it should not be problematic when it comes to resizing of the canvas.

JSFIDDLE EXAMPLE

Solution 4

A better solution is to use .container {box-sizing: border-box;}

View more solutions