Skip to main content

Axis Ranging - AutoRange

At the outset, the Axis.visibleRange📘 is adjusted to be equal to the data range of an axis. However, an axis won't adjust its VisibleRange automatically when data changes, unless it is configured to do this. The default behavior can be changed using different AutoRange📘 modes.

AutoRange Once​

This is the default setting. The axis will attempt to autorange once to fit the data as you start the chart. This is an one-time action - the VisibleRange won't adjust to any data changes in future.

Note: Specifying axis.visibleRange📘 at startup will set that as the first default range. AutoRange.Once is ignored when a visibleRange is set

const { SciChartSurface, NumericAxis, SciChartJsNavyTheme, EAutoRange } = SciChart;

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

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

// Set AutoRange on the yAxis
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(
    new NumericAxis(wasmContext, {
        autoRange: EAutoRange.Once
    })
);

AutoRange Always​

In this mode, the axis will attempt to autorange always to fit the data every time the chart is drawn. The VisibleRange will adjust to data changes correspondingly.

Please be aware that this setting will override any other ranging, including zooming and panning by modifiers, but is useful in situations where you always want to view the extents of the data.

To combine AutoRanging and user-zooming you need to use ZoomState - a special technique we will talk about later.

const { SciChartSurface, NumericAxis, SciChartJsNavyTheme, EAutoRange } = SciChart;

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

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

// Set AutoRange on the yAxis
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(
    new NumericAxis(wasmContext, {
        autoRange: EAutoRange.Always
    })
);

AutoRange Never​

The axis will never autorange. With this option, you would need to set the VisibleRange manually. The VisibleRange won't adjust to any data changes.

const { SciChartSurface, NumericAxis, SciChartJsNavyTheme, EAutoRange } = SciChart;

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

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

// Set AutoRange on the yAxis
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(
    new NumericAxis(wasmContext, {
        autoRange: EAutoRange.Never
    })
);

Adding Padding or Spacing with GrowBy​

Also, it is possible to add spacing or padding to the visibleRange when the chart autoranges via the GrowBy📘 property. It allows to specify two fractions which will be always applied to the Min, Max values of visibleRange :

const { SciChartSurface, NumericAxis, SciChartJsNavyTheme, EAutoRange, NumberRange } = SciChart;

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

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

// Set GrowBy on the yAxis to add 20% padding above/below
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(
    new NumericAxis(wasmContext, {
        autoRange: EAutoRange.Always,
        growBy: new NumberRange(0.2, 0.2)
    })
);

Programmatically Ranging an Axis​

See the section on Setting and Getting VisibleRange for more details.