Chart height is messing on creating new chart after destroying a canvas

During the creation of my chart initially it is rendering up perfectly like you can see below but when i use my filter to get the dynamic datasets and render my chart, after destroying the initial chart created, the height of my chart gets messed up, i have tried all things like responsive,maintainaspectratio but none of them seems to work.Image attached below. I am new to this can anyone help. I will provide my chart code below for reference. Initial code:

success: function (response) {
    labelsAverageChart = response.data.map(item => item.cGAAname);
    let completedData = response.data.map(item => item.completed);
    let acceptedData = response.data.map(item => item.accepted);
    let onHoldData = response.data.map(item => item.onHold);
    let cancelledData = response.data.map(item => item.cancelled);

    ctxAverageChart = document.getElementById('AverageChart');
    window.AverageChart = new Chart(ctxAverageChart, {
        type: 'bar',
        data: {
            labels: ['a', 'b', 'c', 'd'],
            datasets: [
                {
                    label: 'Completed',
                    data: ['1234', '739', '832', '812'],
                    backgroundColor: '#597445',
                    borderColor: 'rgba(75, 192, 192, 1)'
                },
                {
                    label: 'Accepted',
                    data: ['1234', '739', '832', '812'],
                    backgroundColor: '#1679AB',
                    borderColor: 'rgba(54, 162, 235, 1)'
                },
                {
                    label: 'On Hold',
                    data: ['1234', '739', '832', '812'],
                    backgroundColor: '#FFA62F',
                    borderColor: 'rgba(255, 206, 86, 1)'
                },
                {
                    label: 'Cancelled',
                    data: ['1234', '739', '832', '812'],
                    backgroundColor: '#C40C0C',
                    borderColor: 'rgba(255, 99, 132, 1)'
                }
            ]
        },
        options: {
            responsive: true,
            plugins: {
                title: {
                    display: true,
                    text: 'GAA Wise Chart'
                },
                legend: {
                    position: 'bottom'
                }
            },
            scales: {
                y: {
                    type: 'logarithmic',
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: 'Job Count'
                    },
                    elements: {
                        bar: {
                            borderWidth: 5
                        }
                    },
                    ticks: {
                        callback: function (value) {
                            if (value === 2000000) return '20L';
                            if (value === 1000000) return '10L';
                            if (value === 100000) return '1L';
                            if (value === 10000) return '10K';
                            if (value === 1000) return '1K';
                            return null;
                        }
                    }
                },
                x: {
                    grid: {
                        offset: true
                    },
                    title: {
                        display: true,
                        text: 'Zone'
                    }
                }
            }
        }
    });
}

Code after filter selection

success: function (response) {
    console.log("API Response:", response);
    window.AverageChart.destroy();
    ctxAverageChart = document.getElementById('AverageChart');
    debugger;
    //if (window.AverageChart) window.AverageChart.destroy();
    //ctxAverageChart.canvas.maxHeight = '400px';
    //window.AverageChart.canvas.height = '400px';
    labelsAverageChart = response.data.map((item, index) => `${item.gaapath} (${index + 1})`);
    let jobsCompleted = response.data.map(item => item.jobsCompleted);
    let jobsAccepted = response.data.map(item => item.jobsAccepted);
    let jobsOnHold = response.data.map(item => item.jobsOnHold);
    let jobsCancelled = response.data.map(item => item.jobsCancelled);
    debugger;
    window.AverageChart = new Chart(ctxAverageChart, {
        type: 'bar',
        data: {
            labels: ['a', 'b', 'c', 'd'],
            datasets: [
                {
                    label: 'Completed',
                    data: ['1234', '739', '832', '812'],
                    backgroundColor: '#597445',
                    borderColor: 'rgba(75, 192, 192, 1)'
                },
                {
                    label: 'Accepted',
                    data: ['1234', '739', '832', '812'],
                    backgroundColor: '#1679AB',
                    borderColor: 'rgba(54, 162, 235, 1)'
                },
                {
                    label: 'On Hold',
                    data: ['1234', '739', '832', '812'],
                    backgroundColor: '#FFA62F',
                    borderColor: 'rgba(255, 206, 86, 1)'
                },
                {
                    label: 'Cancelled',
                    data: ['1234', '739', '832', '812'],
                    backgroundColor: '#C40C0C',
                    borderColor: 'rgba(255, 99, 132, 1)'
                }
            ]
        },
        options: {
            plugins: {
                title: {
                    display: true,
                    text: 'GAA Wise Chart'
                },
                legend: {
                    position: 'bottom'
                }
            },
            scales: {
                y: {
                    gridLines: {
                        display: false
                    },
                    //type: 'logarithmic',
                    title: {
                        display: true,
                        text: 'Job Count'
                    }
                    // ticks: {
                    //     callback: function (value) {
                    //         if (value === 2000000) return '20L';
                    //         if (value === 1000000) return '10L';
                    //         if (value === 100000) return '1L';
                    //         if (value === 10000) return '10K';
                    //         if (value === 1000) return '1K';
                    //         return null;
                    //     }
                    // }
                },
                x: {
                    gridLines: {
                        offsetGridLines: true,
                        display: false,
                        borderDash: [6, 2],
                        tickMarkLength: 5
                    },
                    title: {
                        display: true,
                        text: 'Zone'
                    }
                }
            }
        }
    });
},
error: function (error) {
    console.error("API Error:", error);
}

I Have tried using responsive,maintainaspectratio.

Solution

Apparently you can set the height of the canvas after destroying it. With the following line I was able to solve the issue:

(window.AverageChart) window.AverageChart.destroy();
ctxAverageCharts.canvas.height = 100;