4👍
Unfortunately, you can not add mouse scroll event to the chart, as the chartjs-plugin-zoom will prevent that by default.
However, you can use the following chart plugin, which will get the job done for you …
plugins: [{
beforeDraw: function(c) {
var reset_zoom = document.getElementById("reset_zoom"); //reset button
var ticks = c.scales['x-axis-0'].ticks.length; //x-axis ticks array
var labels = c.data.labels.length; //labels array
if (ticks < labels) reset_zoom.hidden = false;
else reset_zoom.hidden = true;
}
}]
add this plugin followed by your chart options.
Basically, the way chartjs-plugin-zoom works is, it removes/adds elements from/to the ticks array on mouse scroll, and the above plugin will check for that, henceforth show / hide the rest zoom button accordingly.
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3]
}]
},
options: {
pan: {
enabled: true,
mode: 'x',
},
zoom: {
enabled: true,
mode: 'x',
}
},
plugins: [{
beforeDraw: function(c) {
var reset_zoom = document.getElementById("reset_zoom"); //reset button
var ticks = c.scales['x-axis-0'].ticks.length; //x-axis ticks array
var labels = c.data.labels.length; //labels array
if (ticks < labels) reset_zoom.hidden = false;
else reset_zoom.hidden = true;
}
}]
});
$('#reset_zoom').click(function() {
myChart.resetZoom();
});
.myChartDiv {
max-width: 600px;
max-height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<script src="https://npmcdn.com/Chart.Zoom.js@0.3.0/Chart.Zoom.min.js"></script>
<div class="myChartDiv">
<canvas id="myChart" width="600" height="400"></canvas>
</div>
<button id="reset_zoom" hidden>
Reset zoom
</button>
2👍
Another approach to this is to use the zoom plugin onZoomComplete event.
First, you should apply a style to the zoom button that will have it hidden by default.
.reset-zoom {
display: none;
}
and the button
<button id="reset_zoom" class="reset-zoom">
Reset zoom
</button>
Then on the chart’s zoom options you should add
zoom: {
enabled: true,
mode: 'x',
onZoomComplete: function(myChart) {
$('#reset_zoom').show();
}
}
And in order to hide the zoom button again once a resetZoom is called you could add
$('#reset_zoom').click(function(){
myChart.resetZoom();
$('#reset_zoom').hide();
});
So each time you zoom in the reset zoom button is displayed and once you reset the zoom it is hidden again.