Chartjs-How to control visibility of canvas image via button outside the canvas(ChartJs)?

by

1👍

You could enhance Chart’s base class by a new property which determines if an image should be shown or not. e.g.

Chart.showImage=true;

This property could be used inside your extended draw function and ultimately call or not call ctx.drawImage.

  if (Chart.showImage) {
    ctx.drawImage(base_image, xaxis.getPixelForValue(undefined, index) - 15, 50, 30, 30);
  }

With this in place you can simply set showImage to false and update your chart like this:

var myChart = new Chart(ctx, options);
createImg(1);
function clearChart(index) {
  //functions will go here to clear placed elements 
  Chart.showImage = false;
  myChart.update();
}

Leave a comment