Estoy tratando de actualizar el gráfico de barras cuando los valores de un menú desplegable cambian en un campo. Probé todas las respuestas aquí Destroy chart.js bar graph para volver a dibujar otro gráfico en el mismo <canvas> , pero no tuve suerte. ¿Podrías ayudarme?

A continuación se muestra el código que he escrito para eliminar el elemento del lienzo y volver a crearlo

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, })

Intenté destroy() la opción como se muestra a continuación. no funcionó

 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, })

Puedo ver que está allí en el DOM, pero el gráfico no se muestra