Button Zoom In & Zoom Out

Found the fix for the related error to this issue: https://github.com/vuejs/core/issues/3024
Apparently, I have to define the property such as:
Object.defineProperty(axis, ‘visibleRange’, {
value: new NumberRange(newMin, newMax),
writable: true,
configurable: true
})

While that fix the error, my issue now is, I have to hover on to the chart before the updated ranges are applied. I subscribed to my axes visible range changes and it doesn’t trigger it if I’m clicking the button, but it does when using the mousewheel to zoom.

I might try to find a workaround, thanks!

Hi Maryjes, I’m glad you fixed the error above which seems to be related to Vue.js not SciChart.

The second issue:

I have to hover on to the chart before the updated ranges are applied. I subscribed to my axes visible range changes and it doesn’t trigger it if I’m clicking the button, but it does when using the mousewheel to zoom.

I’ve never seen that before. if you set axis.visibleRange in code, the chart will immediately update, whether you are hovering the chart or not.

I’d suggest trying to build your custom interaction without VueJS to isolate if Vue is causing extra problems. You can start off by taking our codepen in the documentation. If you find an error in SciChart.js that needs us to fix it, then just let me know!

It’s pretty easy to make this behaviour in SciChart.js

Check out this documentation page on Setting Axis.VisibleRange programmatically. In that one you have a button which updates the axis.visibleRange property to effectively zoom. Quite easy to modify to achieve zoom in behaviour (make sure you adjust both X and Y axis ranges)

Hi Andrew, thanks for the response. I was able to fetch the NumericAxis defined with “this.sciChartSurface.yAxes.get(0)” but updating the yAxis.visibleRange, im getting a read-only and non-configurable data property error.

Full error:
“TypeError: ‘get’ on proxy: property ‘$$’ is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected ‘#