6👍
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]-How to use two Y axes in Chart.js v2?
- [Chartjs]-Line chart is not being displayed in Chart.js
0👍
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?
Source:stackexchange.com