1

In version 3.x I can do this with onScaleChange

onScaleChange(listener: (start: number, end: number) => void): Token;

The following code works fine on 3.x and prevents the user from zooming out in oblivion with the mouse wheel.

axisX.onScaleChange((start, end) => {
  
  if (start < minInterval) {
    axisX.setInterval(minInterval, end)
  }
  
  if (end > maxInterval) {
    axisX.setInterval(start, maxInterval)
  }

})

If I try it on 4.0 with onIntervalChange I get stack overflow because setInterval will trigger a new onIntervalChange

I cannot for the life of me figure out how to avoid it. Noticing the new (axis:this) I tried to remove the listener with offIntervalChange(token) and add it back before exit with no effect. I am stumped.

SungamR
  • 25
  • 3

1 Answers1

1

Please make sure you have start and end as second and third parameters (first parameter has changed to be symmetric with other event APIs)

Axis.onIntervalChange((axis, start, end) => {
    console.log(`start value: ${start}, end value : ${end}`);
  }
)

Secondly, when preventing the changed axis interval (by overriding it with your min/max limits), temporarily unsubscribe from the interval change event to avoid the maximum call stack size. I'm not sure why this reportedly worked with previous versions :)

const handleIntervalChange = (axis, start, end) => {
    axis.offIntervalChange(token)
    axis.setInterval({ start: 0, end: 10 })
    token = axis.onIntervalChange(handleIntervalChange)
}
let token = chart.getDefaultAxisX().onIntervalChange(handleIntervalChange)
Niilo Keinänen
  • 2,187
  • 1
  • 7
  • 12
  • 1
    I see what I did wrong when I tried to unsubscribe. I held on the my initial token but you get a new one as you resubscribe. It makes sense, thank you! – SungamR May 02 '23 at 14:09