SciChart.js JavaScript 2D Charts API > Axis APIs > Axis Ranging - Setting and Getting VisibleRange
Axis Ranging - Setting and Getting VisibleRange

What is VisibleRange?

VisibleRange is an actual axis range, measured in chart units. This is a part of a chart that is currently visible in a viewport.

This is a different concept to the Data Range, which is the extents of the data on the chart.

The diagram below explains the concept of the VisibleRange:

Adjusting XAxis and YAxis visible range in a JavaScript Chart

Setting Axis.VisibleRange Programmatically

To programmatically range an axis, set the AxisCore.visibleRange property with a NumberRange type.

import { NumericAxis } from "scichart/charting/Visuals/Axis/NumericAxis";
import { NumberRange } from "scichart/Core/NumberRange";

const xAxis = new NumericAxis(wasmContext);

// Set the visibleRange. This will update the chart axis immediately
xAxis.visibleRange = new NumberRange(5, 10);

// Get the visibleRange
const range = xAxis.visibleRange;
console.log(`Axis VisibleRange is ${range.min}, ${range.max}`);

// Note: Treat NumberRange as immutable. Set a new NumberRange on visibleRange property to update the chart

VisibleRange in Category Axis

Note the CategoryAxis is treated as a special case. Although it has the same property CategoryAxis.visibleRange of type NumberRange, it expects values to be indices, not data-values.

The reason for this is that this axis type works with with data indexes, not actual data values. So a NumberRange should be applied instead, with lower data index as Min and Upper data index as Max.

To learn more about how to convert values from Data-values to Indexes and back in a CategoryAxis, please refer to the Convert Pixels to Data Coordinates article.

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 :

Copy Code
const xAxis = new NumericAxis(wasmContext);

// set the growBy factor. This adds a fractional padding when zooming to fit
// e.g. this will add 10% padding to visibleRange.min and 5% padding to visibleRange.max
xAxis.growBy = new NumberRange(0.1, 0.05);

 

Zooming to fit all the Data

Sometimes it is required to make an axis to show the full extent of the data associated with it. There are several ways to achieve this in code:


To change the VisibleRange by touch or mouse interaction with a chart, please read about our ChartModifier API.