Chart.js is not respecting my container dimensions
24,268
Solution 1
You need to set the option maintainAspectRatio
to false
....
new Chart(ctx).Line(data, {
responsive:true,
maintainAspectRatio: false
});
Fiddle - https://jsfiddle.net/3cxeyLc8/
Solution 2
Add the following CSS to #myChart:
<canvas id="myChart" style="width:100%;height:100%;"></canvas>
Solution 3
Setting width and height 100% work for me
<LineChart :chart-data="chartData1" :options="options" style="width: 100%; height: 100%" />
Author by
lisburnite
Updated on June 18, 2021Comments
-
lisburnite almost 3 years
I'm trying to create a line chart using the Chart.js library. I've got a
div
with dimensions 600px wide by 250px height, and from what I've read the library is meant to create a line chart using these parent dimensions.The following shows my HTML element:
<div style="width:600px;height:250px"> <canvas id="myChart"></canvas> </div>
This is the code I'm using:
$(document).ready(function(){ 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 = $("#myChart").get(0).getContext("2d"); new Chart(ctx).Line(data, { responsive:true }); });
And this shows the issue I'm having in jsfiddle: https://jsfiddle.net/Lr88htnp/ (Note that the rendered chart has dimensions of 600x300)
-
A Friend over 6 yearsthis is now an outdated way to create charts as of chart.js version 2
-
Eta over 6 yearsAhhh finally, nearly a dozen of topics and no one mentioned this aspect ratio. Good job !
-
bvdb over 5 years@AFriend maybe so, but the
maintainAspectRatio
option is still available, and fixes the problem.