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?
Lets say you wanted to add 50px of padding to the left side of the chart canvas, you would do: let chart = new Chart(ctx, { type: 'line', data: data, options: { layout: { padding: { left: 50 } } } }); Copied!
Specifies the space between the object and the margin. If there is a border then it specifies the space between the object and the border.
To set the chart size in ChartJS, we recommend using the responsive option, which makes the Chart fill its container. You must wrap the chart canvas tag in a div in order for responsive to take effect. You cannot set the canvas element size directly with responsive .
Chart. js provides a few options to enable responsiveness and control the resize behavior of charts by detecting when the canvas display size changes and update the render size accordingly.
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
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With