Pre loader

Stop zooming on small visible range



We have a heatmap where we can zoom in using the MouseWheelZoomModifier. Essentially we want to stop zooming at a certain visibleRange level and we cannot achieve it. Currently we have a heatmap that’s about 1500 pixels in width (with 1500 datapoints, 1-to-1), but the user can zoom so far you essentially see just 1 data point spread over the 1500 pixels.

We want to be able to zoom, but up to a certain limit, let’s say 100 datapoints visible. When visibleRange.max – visibleRange.min <= 100 we want to stop zooming.

We’ve tried suspendUpdates() and manually setting the visibleRange, but this doesn’t produce the desired results because suspendUpdates stops everything (including zooming out again) and resetting visibleRange solves it for a second, but the user is able to zoom in again. We also tried a custom mouseWheelModifier class and just removing the zoom in functionality at the treshold but that does not seem to work because scichart gives an error of having different mouseWheelModifiers.

I hope that this problem was expressed sufficiently. Please let us know if you have any questions.

  • You must to post comments

Hi Andrew,

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

xAxis.visibleRangeChanged.subscribe(async (args) => {;

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

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.

  • Andrew Burnett-Thompson
    Well, if you didn’t have the debounce then it would work exactly as you require. Perhaps implement your range clipping logic before ?
  • You must to post comments

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)}`;

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

  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies