[Chartjs]-Getting chart js bar chart to fill window

by

8👍

✅

Please see the post: Chart.js canvas resize . There are actually two answers that are really good solutions here. You can use the chart options like below: 

// Boolean - whether or not the chart should be responsive and resize when the browser does.

responsive: true,

// Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container

maintainAspectRatio: false,

or you can set the canvas width and height using client side code: 

var ctx = document.getElementById("canvas").getContext("2d");
ctx.canvas.width = 300;
ctx.canvas.height = 300;
var myDoughnut = new Chart(ctx).Doughnut(doughnutData);

This post very effectively answers your question about why % values dont work: Canvas is stretched when using CSS but normal with "width" / "height" properties

2👍

After setting responsive and ratio options (check out related chartjs doc), use following css to fill 100% of the parent:

html

<div class="panel">
  <div class="chart-container">
    <canvas id="chart"></canvas>
  </div>
</div>

scss:

.panel {
  display: flex;

  .chart-container {
    position: relative;
    flex-grow: 1;
    min-height: 0;
  }
}

Leave a comment