[Chartjs]-Chart.js adjust height in mobile view

by

16👍

if you are using bootstrap you can use table responsive class to maintain the responsive view without maintainAspectRatio Option

so your canvas code:

<div class="table-responsive">
    <canvas id="canvas" style="height:400px" class="table"></canvas>
</div>

and your options code:

 options: {
            responsive: false,
            maintainAspectRatio: false,
            //...your other values

7👍

I believe the answer is to set the maintainAspectRatio: false option for the chart and then set the minimum height of the chart responsively if the screen width reaches a certain size.

4👍

Another way you can use min-height it should be inline style to the canvas and you can keep responsive true in this case 

<div class="table-responsive">
  <canvas id="canvas"  style="min-height:250px"  class="table"></canvas>
</div>

and you options responsive true

  options: {
                responsive: true,// other properties ....
            }

Leave a comment