function addChart(key, colors) {
  const chartData = getChartData(currentYear.value, key);

  const chart = {
    chart: null,
    data: chartData,
    colors: colors,
    key: key
  };

  charts.value.push(chart);
}

onMounted(async () => {
  addChart("key1", colors1);
  addChart("key2", colors1);
  addChart("key3", colors1);
});

<template>
  <div id="main">
    <div id="chartContainers" class="chart-container">
      <div v-for="(chartData, index) in charts" :key="index" class="chart-wrapper">
        <div class="chart-title">{{ chartData.key }}</div>
        <div class="canvas-container">
          <Doughnut
              :data="{ labels: ['A', 'B', 'C'], datasets: [{ data: chartData.data, backgroundColor: chartData.colors }] }"
              :options="{ responsive: true, maintainAspectRatio: false, animation: { animateRotate: true, animateScale: true }, plugins: { tooltip: { enabled: true } } }"
          />
        </div>
      </div>
    </div>
  </div>
</template>

I’m working on a component that consists of multiple charts. When all is done, the user is supposed to be able to dynamically add charts to the page. However right now, I’m unable to resize the charts so they all fit their parent container. When the component is rendered on my page, the charts added at the beginning appear really small and get progressively larger, with the last chart added being its regular size. How do I make it so all my charts are the same size and fit their container?