Chartjs-How to fix size of mixed chart with bubble chart in Chart.js?

by

1👍

The following chart options seem to be a good approach.

options : {
   responsive : false,
   maintainAspectRation : false,
   ...
}

Further you can try to include the canvas in a div element and omit width and height on the canvas.

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

Then you need to define the following CSS.

.chart-container {
  width: 1320px;
  height: 685px;  
}

#mixed_graph_canvas {
  width: 100%;
  height: 100%;
}

0👍

If wrapping the canvas in a div can’t solve it, or if the responsive option doesn’t work, then the following options may give you the desired result.

options : {
  responsive : false,
  maintainAspectRatio : false,
  layout : {
    autoPadding : false
  }
}

Leave a comment