Angular Axis

In the Angular 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.

Demo

Supported Axes

The Angular 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 IgxCategoryXAxisComponent 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 IgxCategoryXAxisComponent to the Angular data chart component:

<igx-data-chart [dataSource]="data"
    width="100%"
    height="400px">
    <igx-category-x-axis name="xAxis" />
</igx-data-chart>

Category Y Axis

The IgxCategoryYAxisComponent 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 IgxCategoryYAxisComponent to the data chart component:

<igx-data-chart [dataSource]="data"
    width="100%"
    height="400px">
    <igx-category-y-axis name="yAxis" />
</igx-data-chart>

Category DateTime X Axis

The IgxCategoryDateTimeXAxisComponent 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)

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

<igx-data-chart [dataSource]="data"
    width="100%"
    height="400px">
    <igx-category-date-time-x-axis name="yAxis"
        (FormatLabel)=”xAxisFormatLabel()”
        dateTimeMemberPath="Date" >
        </igx-category-date-time-x-axis>
</igx-data-chart>

Numeric X Axis

The IgxNumericXAxisComponent 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 IgxNumericXAxisComponent to the Angular data chart component:

<igx-data-chart [dataSource]="data"
    width="100%"
    height="400px">
    <igx-numeric-x-axis name="xAxis" />
</igx-data-chart>

Numeric Y Axis

The IgxNumericYAxisComponent 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 IgxNumericYAxisComponent to the Angular data chart component:

<igx-data-chart [dataSource]="data"
    width="100%"
    height="400px">
    <igx-numeric-y-axis name="yAxis" />
</igx-data-chart>

Time X Axis

The IgxTimeXAxisComponent 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 IgxTimeXAxisComponent 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 IgxTimeXAxisComponent to the Angular data chart component:

<igx-data-chart [dataSource]="data"
    width="100%"
    height="400px">
    <igx-time-x-axis name="xAxis" dateTimeMemberPath="Date"/>
</igx-data-chart>

Ordinal Time X Axis

The main difference between the IgxOrdinalTimeXAxisComponent and the IgxTimeXAxisComponent is that in the ordinal axis, the dates displayed are assumed to be equidistant. The IgxTimeXAxisComponent currently sorts and aligns the dates according to a chronological timescale. Therefore, we recommend using IgxOrdinalTimeXAxisComponent 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 IgxOrdinalTimeXAxisComponent to the Angular data chart component:

<igx-data-chart [dataSource]="data"
    width="100%"
    height="400px">
    <igx-ordinal-time-x-axis name="xAxis" dateTimeMemberPath="Date"/>
</igx-data-chart>

Percent Change Y Axis

The IgxPercentChangeYAxisComponent 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 IgxNumericYAxisComponent, 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 IgxPercentChangeYAxisComponent to the Angular data chart component:

<igx-data-chart [dataSource]="data"
    width="100%"
    height="400px">
    <igx-percent-change-y-axis name="yAxis" />
</igx-data-chart>

Additional Resources