Chartjs-Canvas stretching when using column-count

You could greatly simplify this using grid. It will give you more predictable results and it will be more reusable in your project and it will be a lot easier to reason about as your project grows.

Also, notice how the canvas height value uses !important to override the fixed values of the height of your chart that are applied as inline styles by Chart.js.

.container {
  width: 90%;
  margin: auto;
}

.row {
  display: grid;
  /* 
    A standard 12 column grid can be evenly 
    divided into quarters and thirds.
  */
  grid-template-columns: repeat(12, 1fr);
}

.col-full {
  grid-column: span 12;
}

.col-half {
  grid-column: span 6;
}

.col-quarter {
  grid-column: span 3;
}

/* ✨ Magic ✨ */
canvas {
  max-width: 100%;
  height: 100% !important;
}

And now the HTML:

<div class="container">
  <div class="row">
    <div class="col-quarter">
      <canvas id="pieChart1"></canvas>
    </div>
    <div class="col-quarter">
      <canvas id="pieChart2"></canvas>
    </div>
    <div class="col-half">
      <canvas id="barChart"></canvas>
    </div>
  </div>
</div>

The result: