Error: Canvas is already in use. Chart with ID '1' must be destroyed before the canvas can be reused.

Hello i am making a graph in ChartJS it works fine but when i change date filters i will get this error, i saw in documentation that they use chart.destroy(); but for me its not working, this is my code so far:

HTML :

<label for="startdate">Start Date</label>
        <input type="date" name="startdateOutlay" id='startdateOutlay' value="{{date("Y-m-d",strtotime('monday this week'))}}"/>
        <label for="enddate">End Date</label>
        <input type="date" name="enddateOutlay" id="enddateOutlay" value="{{date("Y-m-d",strtotime('sunday this week')) }}"/>
        <button type="submit" id="outlayButton" onclick="getData()">Show Values</button>

JavaScript:

<script>

    window.onload = function () {
       // outlayGraph()
        getData()

    }

    var albanianLek = [], americanDollar = [], euro = [], britishPound = [], created_date = []

    async function outlayGraph() {

         //   await getData()

        const ctx = document.getElementById('outlayGraph').getContext('2d');

        const data = {
                labels: created_date,
                datasets: [{
                    label: 'ALL',
                    borderColor: 'rgb(255, 0, 0)',
                    data: albanianLek
                },
                    {
                        label: 'GBP',
                        borderColor: 'rgb(255, 0, 255)',
                        data: britishPound
                    },

                    {
                        label: 'USD',
                        borderColor: 'rgb(0, 153, 0)',
                        data: americanDollar
                    },

                    {
                        label: 'EUR',
                        borderColor: 'rgb(0, 0, 255)',
                        data: euro
                    },

                ]
        };

        const config = {
            // The type of chart we want to create
            type: 'line',
            // The data for our dataset
            data,
            // Configuration options go here
            options: {
                tooltips: {
                    mode: 'index'
                }
            }
        };

        let chart = new Chart();

        if(chart){
             chart.destroy();
             chart = new Chart(ctx, config);
            console.log("Destroyed");
        }else {
            chart = new Chart(ctx, config);
            console.log("Not destroyed");
        }
    }

    function getData(){

        var startdate = document.getElementById('startdateOutlay');

        var enddate = document.getElementById('enddateOutlay');

        const apiUrl = `/api/outlay?startdate=${startdate.value}&enddate=${enddate.value}`;

        $.ajax({
            type:'GET',
            url:apiUrl,
            dataType: "json",
            success:function(data) {
                const jsonValues = data.data
                fillGraphic(jsonValues);
                outlayGraph();
            }
        });
    }

    //Fetch Data from API
     function fillGraphic(barChatData) {

       // console.log(barChatData.length);
        const allValues = [], usdValues = [], eurValues = [], gbpValues = [], dateValues = [];

        for (let i = 0; i < barChatData.length; i++) {
                const item = barChatData[i];

                console.log(item.currencies.ALL);
                if(item.currencies.ALL == null){
                    allValues.push("0");
                }else{
                    allValues.push(item.currencies.ALL);
                }

                if(item.currencies.USD == null){
                    usdValues.push("0");
                }else{
                    usdValues.push(item.currencies.USD);
                }

                if(item.currencies.EUR == null){
                    eurValues.push("0");
                }else{
                    eurValues.push(item.currencies.EUR);
                }

                if(item.currencies.GBP == null){
                    gbpValues.push("0");
                }else{
                    gbpValues.push(item.currencies.GBP);
                }

               dateValues.push(item.date);
        }

        albanianLek = allValues;
        britishPound = gbpValues;
        americanDollar = usdValues;
        euro = eurValues;
        created_date = dateValues;
    }
</script>

The logic is that when i click the button the function getData() is called where the API is called, after the API is called the fillGraphic(jsonValues); is called here the values are being prepared for the graphic to be shown and in the end the graphic is called which is outlayGraph(); Here i get the error when i change filters because says that a graph already exists and must be destroyed, so i have made that if else verification that if the graph exists to destroy it and do it again but its not working.