title: Canvas is already in use. Chart with ID '3' must be destroyed before the canvas can be reused
body: <p>I am trying to update Bar chart when a dropdown values getting change on a field. I tried all the answers here <a href="https://stackoverflow.com/questions/40056555/destroy-chart-js-bar-graph-to-redraw-other-graph-in-same-canvas">Destroy chart.js bar graph to redraw other graph in same &lt;canvas&gt;</a>, but no luck. Can you please help me?</p>
  <p>Below is the code that I have written to remove canvas element and recreate it</p>
  <p>html</p>
  <pre><code>  &lt;div class=&quot;p-grid&quot;&gt;
              &lt;div class=&quot;p-col-12&quot; id=&quot;chart-bar&quot;&gt;
                  &lt;canvas id=&quot;myBarChart&quot;&gt;&lt;/canvas&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  <p>TS</p>
  <pre><code>const ctx: any = document.getElementById('myBarChart')
              ctx.remove();
              const canvas = document.createElement(&quot;canvas&quot;);
              canvas.setAttribute(&quot;id&quot;, &quot;myBarChart&quot;);
              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(&quot;chart-bar&quot;);
              element.appendChild(canvas);
              
              new Chart(ctx, {
                  type: 'bar',
                  data: chartData.value,
                  options: chartOptions,
              })
  </code></pre>
  <p>Tried <code>destroy()</code> option as below. It didn't work</p>
  <pre><code>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,
              })
                  
  </code></pre>
  <p>I can see it's there in the DOM, but graph is not displaying</p>
  <p><a href="https://i.stack.imgur.com/GpCqU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GpCqU.png" alt="enter image description here" /></a></p>