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.
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:
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?
