Move ChartJS charts to original position when window maximized

I have a page with multiple charts using ChartJS, each contained in its own div like so:

<div class="formgrid grid gap-2">
<div class="chart-container field col" [ngClass]="{'fullScreen': expandVisible[0]}">
<div style="text-align: center; padding-top: 15%;"
*ngIf="loading[0] || disableStepper">
<p-progressSpinner ariaLabel="loading" />
</div>
<div style="margin-top: 10px; margin-left: 10px;position: absolute;"
*ngIf="!loading[0] && !disableStepper">
<p-button icon="pi pi-expand"
(onClick)="expandChart(0)" />
</div>
<canvas id="GeneralChart1">{{ chart }}</canvas>
</div>
<div class="chart-container field col" [ngClass]="{'fullScreen': expandVisible[1]}">
<div style="text-align: center; padding-top: 15%;"
*ngIf="loading[1] || disableStepper">
<p-progressSpinner ariaLabel="loading" />
</div>
<div style="margin-top: 10px; margin-left: 10px;position: absolute;"
*ngIf="!loading[1] && !disableStepper">
<p-button icon="pi pi-expand"
(onClick)="expandChart(1)" />
</div>
<canvas id="GeneralChart2">{{ chart }}</canvas>
</div>
</div>
<div class="formgrid grid gap-2">
<div class="field col-12 md:col-3"></div>
<div class="chart-container field col-12 md:col-6" [ngClass]="{'fullScreen': expandVisible[2]}">
<div style="text-align: center; padding-top: 15%;"
*ngIf="loading[2] || disableStepper">
<p-progressSpinner ariaLabel="loading" />
</div>
<div style="margin-top: 10px; margin-left: 10px;position: absolute;"
*ngIf="!loading[2] && !disableStepper">
<p-button icon="pi pi-expand"
(onClick)="expandChart(2)" />
</div>
<canvas id="GeneralChart3">{{ chart }}</canvas>
</div>
<div class="field col-12 md:col-3"></div>
</div>


Options for chart:

options: {
plugins: {
title: {
display: true,
text: 'Maximum Demand Vs Installed Capacity',
padding: {
top: 10,
bottom: 30
}
},
legend: {
position: 'bottom'
},
datalabels: {
display: false
},
zoom: {
pan: {
enabled: true,
mode: 'xy',
},
zoom: {
wheel: {
enabled: true,
speed: 0.1,
},
pinch: {
enabled: true,
},
mode: 'xy',
},
},
},
responsive: true,
scales: {
x: {
display: true,
},
y: {
display: true,
beginAtZero: true
}
},
},


The problem is when the window is resized, the charts are no longer aligned in rows as defined, but in one column. This is good when the window is made smaller, but I would like it to return to the defined alignment when the window is fully maximized.

How can I do this? Thank you.

Images for reference:





Continue reading...