[Chartjs]-How to reset the graph/chart after zoomin, pan using chartjs

Try chartjs-plugin-zoom

First, get the Chart.js instance, and then you can just call the resetZoom function of the instance to reset the zooming and panning.

window.myLine = new Chart(ctx, config);

...

function resetZoom() {
  window.myLine.resetZoom();
}

...

<button onclick="resetZoom()">Reset Zoom</button>

The chart.js version I’m using is 2.9.3 and chartjs-plugin-zoom version 0.7.7

See examples:

• chartjs-plugin-zoom samples
• chartjs zoom and pan on codepen

There are multiple ways to do this:

Try any of these:

1. .clear()

2. .destroy()

myLineChart.destroy();

Then re-initialize the chart:

var ctx = document.getElementById("myChartLine").getContext("2d");
myLineChart = new Chart(ctx).Line(data, options);

3. delete the element and then reappending a new to the parent container

   var resetCanvas = function () {

      $('#results-graph').remove(); // this is my <canvas> element
   
      $('#graph-container').append('<canvas id="results-graph"><canvas>');
   
     canvas = document.querySelector('#results-graph'); 
   
     ctx = canvas.getContext('2d');
   
     ctx.canvas.width = $('#graph').width(); // resize to parent width
   
     ctx.canvas.height = $('#graph').height(); // resize to parent height
   
     var x = canvas.width/2;
     var y = canvas.height/2;
     ctx.font = '10pt Verdana';
     ctx.textAlign = 'center';
     ctx.fillText('This text is centered on the canvas', x, y);
   };`
   

4. .update( )

Calling update() on your Chart instance will re-render the chart with any updated values, allowing you to edit the value of multiple existing points, then render those in one animated render loop.

Also refer:

How to clear a chart from a canvas so that hover events cannot be triggered?

chart.js load totally new data