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 […]

I’m using chart.js (or more specifically vue-chartjs) for a component I want to use on a dashboard page. The user is supposed to be able to add new charts to the component using the dashboard. Since the component itself is of fixed size, I need the charts to properly align themselves and more importantly, resize in order to fit their parent container. I tried out a bunch of things but most ended with either the charts not filling out the container properly or overflowing the container vertically. Here is my code: