apex chart not resizing along with parent div

[Ananthalakshmi37]

when my side bar is expanded my charts are getting displayed according to the width of parent container as shown in the image

when my side bar is minimized my charts are not getting displayed as per the parent container and getting space.

here is my code:
this.chartOptions = [
{
colors: this.colors,
series: this.seriesNames.map((name, index) => ({
name: name,
data: this.data[index],
type: 'line',
markers: {
size: 5,
shape: 'circle',
colors: [this.colors[index]],
strokeColors: '#fff',
strokeWidth: 2,
hover: {
size: 7,
},
},
stroke: {
show: true,
width: 2,
curve: 'smooth',
},
})),
chart: {
height: 320,
type: 'line',
toolbar: {
show: false,
},
events: {
mounted: (chart) => {
chart.windowResizeHandler();
}
}
},
xaxis: {
categories: this.labels,
labels: {
style: {
fontSize: '12px',
fontFamily: 'Inter, sans-serif',
},
},
tooltip: {
enabled: false,
},
},
yaxis: {
min: 0,
max: maxYValue,
labels: {
formatter: (val: number) => ${val.toFixed(0)} ${this.tooltipSuffix},
},
},
dataLabels: {
enabled: false,
},
stroke:{
curve:'smooth',
},
tooltip: {
enabled: true,
shared: true,
intersect: false,
style: {
fontFamily: 'Inter, sans-serif',
},
marker: {
show: true,
fillColors: this.colors,
},
y: {
formatter: (value: number) => ${value} ${this.tooltipSuffix},
},
},
legend: {
position: 'bottom',
horizontalAlign: 'center',
markers: {
fillColors: this.colors,
},
showForSingleSeries:true,
},
grid: {
show: true,
borderColor: '#e0e0e0',
strokeDashArray: 4,
xaxis: {
lines: {
show: false,
},
},
yaxis: {
lines: {
show: true,
},
},
},
responsive: [
{
breakpoint: 600,
options: {
chart: {
height: 200,
},
legend: {
position: 'bottom',
showForSingleSeries: true,
},
},
},
],
}
];
}