I am trying to update Bar chart when a dropdown values getting change on a field. I tried all the answers here Destroy chart.js bar graph to redraw other graph in same <canvas>, but no luck. Can you please help me?

Below is the code that I have written to remove canvas element and recreate it

html

  <div class="p-grid">
            <div class="p-col-12" id="chart-bar">
                <canvas id="myBarChart"></canvas>
            </div>
        </div>

TS

const ctx: any = document.getElementById('myBarChart')
            ctx.remove();
            const canvas = document.createElement("canvas");
            canvas.setAttribute("id", "myBarChart");
            canvas.setAttribute('width','1007');  
            canvas.setAttribute('height','503');  
            canvas.setAttribute('style','display: block; box-sizing: border-box; height: 64vh; width: 35vw;');  
            const element = document.getElementById("chart-bar");
            element.appendChild(canvas);
            
            new Chart(ctx, {
                type: 'bar',
                data: chartData.value,
                options: chartOptions,
            })

Tried destroy() option as below. It didn't work

const chart = ref(null)

 if(chart.value){
                chart.value.destroy()
            }

            const ctx: any = document.getElementById('myBarChart')

           chart.value =  new Chart(ctx, {
                type: 'bar',
                data: chartData.value,
                options: chartOptions,
            })
                

I can see it's there in the DOM, but graph is not displaying