Stop zooming on small visible range

Hi Zino

This is actually quite simple, take a look at the documentation page Listen to Visible Range Changes.

There’s a good live sample on that page and a codepen that you can experiment with.

Here’s how to listen to visiblerange changes:

// subscribe to visibleRangeChanged on yAxis
sciChartSurface.yAxes.get(0).visibleRangeChanged.subscribe((args) => {
  const message = `yAxis range: ${args.visibleRange.min.toFixed(2)}, ${args.visibleRange.max.toFixed(2)}`;
  console.log(message);
});

Using this, you can limit the axis range, or clamp the visiblerange to prevent zooming in or out beyond a certain value. Try something like this

axis.visibleRangeChanged.subscribe((args) => {
  if ((args.visibleRange.max - args.visibleRange.min) < X)  // Constrain max-min to X here
       axis.visibleRange = new NumberRange(min, max); // calculate what min, max you want here 
});

Best regards
Andrew

Hi Andrew,

We’re aware of subscribing to visibleRangeChange, we implement it in a slightly different way.

xAxis.visibleRangeChanged.subscribe(async (args) => {
    subject.next(args.visibleRange);
  });

  subject.pipe(debounceTime(600)).subscribe((r: NumberRange) => {
    // Fetch data and update the dataSeries
    if (
      props?.handleRangeChange !== undefined
    )
      handleRangeChangeWrapper(r);
  });

We use a debounce time because upon zooming in we fetch new, more detailed data.
The solution you suggest works in a sense, however it still allows the user to zoom in too far, and then simply “pushing” it back to 100. We would ideally like a hard limit. I will try implementing something like this in the subject.pipe.