React Axis

In the React data chart component, an axis provides base properties for specifying appearance of axis main lines, gridlines, tickmarks, titles, and labels. There are several different types of axis that can be used by the data chart component for the different types of series that the data chart supports. The type of series determines what type of axes can be used with them.

React Axis Example

Edit on CodeSandbox

Supported Axes

The React data chart component supports various types of axis that are intended to use with specific type of series. The following table lists which axes can be used with type of series.

Axis Type Supported Series Types
CategoryYAxis only Bar Series in Category Series group
CategoryXAxis all Financial Series, Range Series, Category Series (except Bar Series)
TimeXAxis all Financial Series, Range Series, Category Series (except Bar Series)
OrdinalTimeXAxis all Financial Series, Range Series, Category Series (except Bar Series)
PercentChangeYAxis all Financial Series, Range Series, Category Series, Scatter Series, Shape Series
NumericYAxis all Scatter Series, Shape Series, Financial Series, Range Series, Category Series
NumericXAxis all Scatter Series, Shape Series, and Bar Series in Category Series group
NumericAngleAxis all Polar Series
NumericRadiusAxis all Polar Series and Radial Series
CategoryAngleAxis all Radial Series

Category X Axis

The IgrCategoryXAxis treats the data as a sequence of category data items. Labels on this axis are placed along the X-Axis, according to their position in the sequence. This type of axis can display almost any type of data including strings and numbers. This type of axis is compatible with the Financial Series, Range Series, and Category Series (except Bar Series)

The following code snippet demonstrates how to add a IgrCategoryXAxis to the React data chart component:

<IgrDataChart dataSource={this.data}
    width="100%"
    height="400px">
    <IgrCategoryXAxis name="xAxis" />
</IgrDataChart>

Category Y Axis

The IgrCategoryYAxis treats the data as a sequence of category data items. Labels on this axis are placed along the Y-Axis, according to their position in the sequence. This type of axis can display almost any type of data including strings and numbers. This type of axis is compatible only with Bar Series within the Category Series group.

The following code snippet demonstrates how to add a IgrCategoryYAxis to the data chart component:

<IgrDataChart dataSource={this.data}
    width="100%"
    height="400px">
    <IgrCategoryYAxis name="yAxis" />
</IgrDataChart>

Category DateTime X Axis

The IgrCategoryDateTimeXAxis Axis treats the data as a sequence of category data items that are sorted by date. Labels on this axis are placed along the X-Axis, according to the value in a data column that is mapped using the dateTimeMemberPath property of this axis. Also in order to display the formatted labels you can use the formatLabel event. This type of axis is compatible with the Financial Series, Range Series, and Category Series (except Bar Series)

<IgrDataChart dataSource={this.data}
    width="100%"
    height="400px">
    <IgrCategoryDateTimeXAxis name="xAxis"
        labelFormats= {this.xAxisFormatLabel}
        dateTimeMemberPath="Date" />
</IgrDataChart>

Numeric X Axis

The IgrNumericXAxis treats the data as continuously varying numerical data items. Labels on this axis are placed along the X-Axis. Location of labels varies according to the value in a data column that is mapped using their corresponding value-mapping properties. This type of axis is compatible with the Scatter Series and Shape Series types. Also, this axis is compatible with the Bar Series type of Category Series, in which the ValueMemberPath property will be used to map the data column.

The following code snippet demonstrates how to add a IgrNumericXAxis to the React data chart component:

<IgrDataChart dataSource={this.data}
    width="100%"
    height="400px">
    <IgrNumericXAxis name="xAxis" />
</IgrDataChart>

Numeric Y Axis

The IgrNumericYAxis treats the data as continuously varying numerical data items. Labels on this axis are placed along the Y-axis. Location of labels varies according to the value in a data column that is mapped using their corresponding value-mapping properties. This type of axis is compatible with the Scatter Series and Shape Series types. Also, this axis is compatible with Financial Series, Range Series, and Category Series types (except Bar Series).

The following code snippet demonstrates how to add a IgrNumericYAxis to the React data chart component:

<IgrDataChart dataSource={this.data}
    width="100%"
    height="400px">
    <IgrNumericYAxis name="yAxis" />
</IgrDataChart>

Time X Axis

The IgrTimeXAxis treats the data as a sequence of category data items that are sorted by date. Labels on this axis are placed along the X-Axis, according to the value in a data column that is mapped using the dateTimeMemberPath property of this axis. This type of axis is compatible with the Financial Series, Range Series, and Category Series types.

The IgrTimeXAxis also supports the ability to exclude intervals of data with breaks. As a result, labels will not appear at the excluded interval. For example, working/non-working days, holidays, or weekends.

The following code snippet demonstrates how to add a IgrTimeXAxis to the React data chart component:

<IgrDataChart dataSource={this.data}
    width="100%"
    height="400px">
    <IgrTimeXAxis name="xAxis" dateTimeMemberPath="Date"/>
</IgrDataChart>

Ordinal Time X Axis

The main difference between the IgrOrdinalTimeXAxis and the IgrTimeXAxis is that in the ordinal axis, the dates displayed are assumed to be equidistant. The IgrTimeXAxis currently sorts and aligns the dates according to a chronological timescale. Therefore, we recommend using IgrOrdinalTimeXAxis for better performance or when your data items are already in chronological order with the same time interval.

The following code snippet demonstrates how to add a IgrOrdinalTimeXAxis to the React data chart component:

<IgrDataChart dataSource={this.data}
    width="100%"
    height="400px">
    <IgrOrdinalTimeXAxis name="xAxis" dateTimeMemberPath="Date"/>
</IgrDataChart>

Percent Change Y Axis

The IgrPercentChangeYAxis works such that it takes the first point in your series as a reference value. Each value after the first value is scaled according to what percent increase or decrease it is compared to the reference value.

This axis type is based on IgrNumericYAxis, and so will support the same series types. For Category Series, the reference value will correspond to the ValueMemberPath for those series. ForScatter Series, the reference value will correspond to the YMemberPath of those series. For Financial Series, the reference value will correspond to the first value mapped to OpenMemberPath property.

The following code snippet demonstrates how to add a IgrPercentChangeYAxis to the React data chart component:

<IgrDataChart dataSource={this.data}
    width="100%"
    height="400px">
    <IgrPercentChangeYAxis name="yAxis" />
</IgrDataChart>

Additional Resources