title: Reloading ChartJs Image
body: <p>I have a chart and before creating a new chart in the same canvas, I call the <code>myccc.destroy();</code> and it works well. </p>
  
  <p>However, if I create a image of chart and after that If I create a new chart, image persist. Obviously, I need to remove image of chart as well as chart itself before redrawing the chart. </p>
  
  <p>I tried this;</p>
  
  <pre><code>$("#dialog_chart_img").remove();
  $(".dialog_chart_img_div").append('&lt;img id="dialog_chart_img" style="width: 655px; height: 580px; margin-top: 40px;" /&gt;');
  
  if (myccc != undefined || myccc != null) {
       myccc.destroy();
      }
  
  var ctx = document.getElementById('dialog_chart');
  
        var myccc = new Chart(ctx, {
            type: 'horizontalBar',
            data: {
              labels: array_zaman,
              datasets: [{
                label: "Yumurta",
                data: array_adet,
              }]
            },
            options: {
              maintainAspectRatio: true,
              responsive: true,
              // maintainAspectRatio: true,
              legend: {
                display: false
              },
              animation: {
                duration: 1,
                onComplete: function(animation) {
                  var chartInstance = this.chart,
                    ctx = chartInstance.ctx;
                  ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize = 16, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily = "charter");
                  ctx.textAlign = 'center';
                  ctx.textBaseline = 'middle';
  
                  this.data.datasets.forEach(function(dataset, i) {
                    var meta = chartInstance.controller.getDatasetMeta(i);
                    meta.data.forEach(function(bar, index) {
                      var data = dataset.data[index];
                      ctx.fillText(data, bar._model.x, bar._model.y);
                    });
                  });
                  document.querySelector('#dialog_chart').remove();
                  document.querySelector('#dialog_chart_img').setAttribute('src', this.toBase64Image());
                }
              }
            }
          });
  </code></pre>
  
  <p>Html:</p>
  
  <pre><code>&lt;div class="dialog_chart_img_div"&gt;
      &lt;img id="dialog_chart_img" style="width: 655px; height: 580px; margin-top: 40px;" /&gt; &lt;br&gt; &lt;br&gt;
      &lt;canvas id="dialog_chart" style="visibility:hidden;"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How can I reload the image after creating a new chart?</p>