SciChart.js JavaScript 2D Charts API > Axis APIs > Axis Ranging, Scaling > Axis Ranging - How to Listen to VisibleRange Changes
Axis Ranging - How to Listen to VisibleRange Changes

How to listen to VisibleRange changes

It is possible to subscribe to listening to the AxisCore.visibleRange changes using the AxisCore.visibleRangeChanged event.

 

// Create a chart with X,Y axis
const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId, {
  theme: new SciChartJsNavyTheme()
});

sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext));

// Add a label showing the status
const textAnnotation = new TextAnnotation({
  text: "Drag to pan the chart",
  ...options
});
sciChartSurface.annotations.add(textAnnotation);

// 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);
  textAnnotation.text = message;
});
const { wasmContext, sciChartSurface } = await chartBuilder.build2DChart(divElementId, {
  surface: { theme: { type: EThemeProviderType.Dark } },
  xAxes: {
    type: EAxisType.NumericAxis,
    options: {
      axisTitle: "X Axis",
    }
  },
  yAxes: {
    type: EAxisType.NumericAxis,
    options: {
      axisTitle: "Y Axis",
    }
  },
  modifiers: [
    { type: EChart2DModifierType.ZoomPan }
  ],
  annotations: [
    {
      type: EAnnotationType.SVGTextAnnotation,
      options: {
        text: "Drag to pan the chart",
        x1: 0.5, y1: 0.5,
        xCoordinateMode: ECoordinateMode.Relative, yCoordinateMode: ECoordinateMode.Relative,
        horizontalAnchorPoint: EHorizontalAnchorPoint.Center, verticalAnchorPoint: EVerticalAnchorPoint.Top,
        opacity: 0.77,
        fontSize: 28,
        fontWeight: "Bold",
        textColor: "White",
      }
    }
  ]
});

const yAxis = sciChartSurface.yAxes.get(0);
const textAnnotation = sciChartSurface.annotations.get(0);

yAxis.visibleRangeChanged.subscribe((args) => {
  const message = `yAxis range: ${args.visibleRange.min.toFixed(2)}, ${args.visibleRange.max.toFixed(2)}`;
  console.log(message);
  textAnnotation.text = message;
});

This results in the following output:

<div id="scichart-root" ></div>

  
body { margin: 0; font-family: Arial; }
#scichart-root { width: 100%; height: 100vh; }

  
async function visibleRangeChanged(divElementId) {

  const {
    SciChartSurface,
    NumericAxis,
    SciChartJsNavyTheme,
    TextAnnotation,
    ZoomPanModifier,
    MouseWheelZoomModifier,
    ECoordinateMode,
    EHorizontalAnchorPoint,
    EVerticalAnchorPoint
  } = SciChart;

  // or, for npm, import { SciChartSurface, ... } from "scichart"

  const options = {
    x1: 0.5, y1: 0.5,
    xCoordinateMode: ECoordinateMode.Relative, yCoordinateMode: ECoordinateMode.Relative,
    horizontalAnchorPoint: EHorizontalAnchorPoint.Center, verticalAnchorPoint: EVerticalAnchorPoint.Top,
    opacity: 0.77,
    fontSize: 28,
    fontWeight: "Bold",
    textColor: "White",
  };

  // #region ExampleA
  // Create a chart with X,Y axis
  const { wasmContext, sciChartSurface } = await SciChartSurface.create(divElementId, {
    theme: new SciChartJsNavyTheme()
  });

  sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext));

  // Add a label showing the status
  const textAnnotation = new TextAnnotation({
    text: "Drag to pan the chart",
    ...options
  });
  sciChartSurface.annotations.add(textAnnotation);

  // 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);
    textAnnotation.text = message;
  });
  // #endregion

  // add pan and zoom behaviour
  sciChartSurface.chartModifiers.add(new ZoomPanModifier(), new MouseWheelZoomModifier());
};

visibleRangeChanged("scichart-root");





async function builderExample(divElementId) {
  const {
    chartBuilder,
    ESeriesType,
    EThemeProviderType,
    EAxisType,
    EAnnotationType,
    EChart2DModifierType,
    ECoordinateMode,
    EHorizontalAnchorPoint,
    EVerticalAnchorPoint
  } = SciChart;

  // or, for npm, import { chartBuilder, ... } from "scichart"

  const xValues = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19];
  const yValues = xValues.map(x => Math.sin(x * 0.2));

  // #region ExampleB
  const { wasmContext, sciChartSurface } = await chartBuilder.build2DChart(divElementId, {
    surface: { theme: { type: EThemeProviderType.Dark } },
    xAxes: {
      type: EAxisType.NumericAxis,
      options: {
        axisTitle: "X Axis",
      }
    },
    yAxes: {
      type: EAxisType.NumericAxis,
      options: {
        axisTitle: "Y Axis",
      }
    },
    modifiers: [
      { type: EChart2DModifierType.ZoomPan }
    ],
    annotations: [
      {
        type: EAnnotationType.SVGTextAnnotation,
        options: {
          text: "Drag to pan the chart",
          x1: 0.5, y1: 0.5,
          xCoordinateMode: ECoordinateMode.Relative, yCoordinateMode: ECoordinateMode.Relative,
          horizontalAnchorPoint: EHorizontalAnchorPoint.Center, verticalAnchorPoint: EVerticalAnchorPoint.Top,
          opacity: 0.77,
          fontSize: 28,
          fontWeight: "Bold",
          textColor: "White",
        }
      }
    ]
  });

  const yAxis = sciChartSurface.yAxes.get(0);
  const textAnnotation = sciChartSurface.annotations.get(0);

  yAxis.visibleRangeChanged.subscribe((args) => {
    const message = `yAxis range: ${args.visibleRange.min.toFixed(2)}, ${args.visibleRange.max.toFixed(2)}`;
    console.log(message);
    textAnnotation.text = message;
  });
  // #endregion
};



// Uncomment this to use the builder example
  //builderExample("scichart-root");

  

 

The most typical use for this callback is to perform some kind of operation when the AxisCore.visibleRange changes, such as updating UI.

It is also possible to use this callback to restrict the VisibleRange in some way, e.g set a bounded or clipped range onto AxisCore.visibleRange when the range changes outside of a desired area.