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>

and you options responsive true

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


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.


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>

and your options code:

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

Related Query

More Query from same tag