how to reset the graph/chart after zoomin, pan using chartjs - php

Question

I recently added zoom-in and pan functionality to my line chart. Now i want to add a reset button or something like that when pressed graph come back to normal position/shape. Currently i am drawing it for dynamic data which get updated every10 seconds.
ThankYou in advance.

Answer 1

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

Answer 2

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);
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);
};`
.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