SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components


RubberBandXyZoomModifier Zoom visibleRangeChanged not hitting when zooming. Can you check this? or any callback function when zooming the chart?

import {SciChartSurface} from "scichart/Charting/Visuals/SciChartSurface";
import {NumericAxis} from "scichart/Charting/Visuals/Axis/NumericAxis";
import {XyDataSeries} from "scichart/Charting/Model/XyDataSeries";
import {FastLineRenderableSeries} from "scichart/Charting/Visuals/RenderableSeries/FastLineRenderableSeries";
import {XyScatterRenderableSeries} from "scichart/Charting/Visuals/RenderableSeries/XyScatterRenderableSeries";
import {EllipsePointMarker} from "scichart/Charting/Visuals/PointMarkers/EllipsePointMarker";
import {NumberRange} from "scichart/Core/NumberRange";
import {RubberBandXyZoomModifier} from "scichart/Charting/ChartModifiers/RubberBandXyZoomModifier";
import {ZoomExtentsModifier} from "scichart/Charting/ChartModifiers/ZoomExtentsModifier";
import {ZoomPanModifier} from "scichart/Charting/ChartModifiers/ZoomPanModifier";
import {EZoomState} from "scichart/types/ZoomState";
import { EExecuteOn } from "scichart/types/ExecuteOn";
import { EXyDirection } from "scichart/types/XyDirection";

async function initSciChart() {
    const {sciChartSurface, wasmContext} = await SciChartSurface.create("scichart-root");
    const xAxis = new NumericAxis(wasmContext);
    const yAxis = new NumericAxis(wasmContext);
    xAxis.visibleRangeChanged.subscribe((args) => {
        console.log("X Axis changed");
    yAxis.visibleRangeChanged.subscribe((args) => {
        console.log("Y Axis changed");
    const scatterSeries = new XyScatterRenderableSeries(wasmContext, {
        pointMarker: new EllipsePointMarker(wasmContext, {width: 7, height: 7, fill: "White", stroke: "SteelBlue"}),
    const lineSeries = new FastLineRenderableSeries(wasmContext, {stroke: "#4083B7", strokeThickness: 2});
    sciChartSurface.renderableSeries.add(lineSeries, scatterSeries);
    const scatterData = new XyDataSeries(wasmContext, {dataSeriesName: "Cos(x)"});
    const lineData = new XyDataSeries(wasmContext, {dataSeriesName: "Sin(x)"});

    for (let i = 0; i < 1000; i++) {
        lineData.append(i, Math.sin(i * 0.1));
        scatterData.append(i, Math.cos(i * 0.1));
    scatterSeries.dataSeries = scatterData;
    lineSeries.dataSeries = lineData;

    sciChartSurface.chartModifiers.add(new RubberBandXyZoomModifier({
        xyDirection: EXyDirection.XDirection
    const updateDataFunc = () => {
        const i = lineData.count();
        lineData.append(i, Math.sin(i * 0.1));
        scatterData.append(i, Math.cos(i * 0.1));
        if (sciChartSurface.zoomState !== EZoomState.UserZooming) {
            xAxis.visibleRange = new NumberRange(i - 1000, i);
        setTimeout(updateDataFunc, 1 / 60);


Please check the example with v2.0.2146. Its working with older version and now its not working.
On the example the first time it will print the console. after that when zooming the change callback is not hitting.

  • Andrew Burnett-Thompson
    Thanks for the code Arun, we will check this
  • Andrew Burnett-Thompson
    ok I just checked this with our internal build and it’s working fine. I will check it with the latest published build too
  • You must to post comments

Hi Arun

I’ve tested this in our internal build, we believe this is fixed by fixing a related issue:
TSRRequestCanvasDraw calls to other destinations are thrown away

What I suggest to do is to wait for our next published update (soon) and try again. If the problem still occurs we will investigate further

Best regards,

  • Arun Surendran
    Thanks Andrew… Its working on v2.0.2179.
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.