Can i limit chartjs to stop zooming if there are no points in selected area? Please find the image below.
As you can see, there is one month gap between two points on xaxis and if I try to zoom in there, it goes on and on. Find the image below.
I don't want it to happen. when the user tries to zoom in on certain points, I want the chart to stop zooming at those two points. one on the extreme left and the other is on the extreme right.
My chart config is as follows:
scales: {
yAxes: [
{
id: 'yAxis',
ticks: {
autoSkip: true,
maxTicksLimit: 10,
beginAtZero: true,
},
},
],
xAxes: [
{
distribution: 'linear',
type: "time",
time: {
min: range_min.getTime(),
max: range_max.getTime(),
unit: "day",
unitStepSize: 1,
displayFormats: {
day: '\nDD/MM/YYYY hh:mm a\n'
},
},
id: 'xAxis',
ticks: {
autoSkip: true,
}
},
],
},
pan: {
enabled: false,
mode: "x",
speed: 1,
threshold: 1,
},
zoom: {
enabled: true,
drag: true,
sensitivity: 0.5,
mode: "x",
rangeMax: {
x: end_date,
},
rangeMin: {
x: start_date,
}
},
In case anyone facing about the same issue, I found a solution to this. After zoom, we can set the chart to its closest left and right points by overriding its original zoom functionality in
onZoom
function. please find the answer.Kudos!