Axes
Send Feedback

Glossary Item Box

Topic Overview

Purpose

This topic explains the types of axes supported on the IGChartView™ control.

In this topic


Introduction

Introduction to axes

In the IGChartView, an axis provides base properties for styling major gridlines, stripes, and axis label settings. The IGChartView control supports several types of axes used by different series groups. The axes available are contingent upon the type of series involved.


Common Axis Properties

Common properties of the axis

Each axis type consists of both unique properties and common properties shared by all types of axis. The table below lists and describes these common properties.

Axis Property

Description

crossingAxis

Determines which axis will cross the current axis, see the Axis Crossing topic for further information.

crossingValue

Determines the crossing location with another axis, see the Axis Crossing topic for further information.

isInverted

Determines whether orientation of the axis is inverted.

majorStroke

Determines the brush of axis major lines.

majorStrokeDashArray

Determines the pattern and spaces between dashes of axis major lines.

majorStrokeThickness

Determines the thickness of axis major lines.

minorStroke

Determines the brush of axis minor lines.

minorStrokeDashArray

Determines the pattern and spaces between dashes of axis minor lines.

minorStrokeThickness

Determines the thickness of axis minor lines.

strip

Determines the brush of axis stripes between major axis lines.

stroke

Determines the brush of the axis line.

strokeDashArray

Determines the pattern and spaces between dashes of axis line.

strokeThickness

Determines the thickness of axis line.



Axis Types

Axis types table

The following table lists all of the axes, categorized in several types based on their orientation and shape in the chart plot area. It also lists applicable series groups for these axis types. Types of axes are grouped by chart plot area orientation/shape and their respective applicable series groups.

Axes Groups

Axes Types

Applicable Series Groups

Cartesian Axes

IGCategoryXAxis

Category Series, Scatter Series, and Financial Price Series

IGCategoryDateTimeXAxis

Category Series (including range and stack series), Scatter Series, and Financial Price Series

IGNumericYAxis

Category Series, Scatter Series, and Financial Price Series

IGNumericXAxis

Polar Axes

IGNumericRadiusAxis

Polar Series and Radial Series

IGNumericAngleAxis
IGCategoryAngleAxis


Cartesian Axes

Introduction to Cartesian axes

Cartesian axes are used only in series that display data points using the Cartesian coordinate system (for example, Scatter Series). These axes are displayed as horizontal or vertical lines along either of the chart’s x or y coordinates.

By default, horizontal and vertical axes are drawn from left to right and bottom to top. The axes orientation can be changed in the IGChartView by using the isInverted property on an individual axis. Perpendicular lines to these axes are called “major gridlines” and they can be spaced evenly by configuring the interval axis property.

IGCategoryXAxis

The IGCategoryXAxis treats the data as a sequence of category labels with the marker placed at a point along the x-axis based on its position in the sequence. The following image highlights a sample IGCategoryXAxis rendering.

IGCategoryDateTimeXAxis

The IGCategoryDateTimeXAxis treats the data as a sequence of date labels with the marker placed at a point along the x-axis based on its value in a data column; mapped using the axis dateTimeMemberPath property. The following image highlights a sample IGCategoryDateTimeXAxis rendering.

IGNumericXAxis

The IGNumericXAxis treats the data as continuously varying numerical labels with the marker placed at a point along the x-axis. The label varies according to the value in a data column that is mapped using the xPath property of the IGScatterSeriesDataSourceHelper in the Scatter Series. The following image highlights a sample IGNumericXAxis rendering.

IGNumericYAxis

The IGNumericYAxis treats the data d as continuously varying numerical label with the marker placed at a point along the y-axis. The label varies according to the value in a data column that is mapped using the yPath property of the IGScatterSeriesDataSourceHelper in the Scatter Series or valuePath property for Category Series. The following image highlights a sample IGNumericYAxis.


Polar Axes

Introduction to polar axes

Only used with Polar axes, the Polar Series and Radial Series display as lines running along either the chart’s radius or the angle coordinates. The following sections describe each of the polar axes together with illustrations of how they look when rendered with applicable series in the IGChartView control.

IGNumericAngleAxis

The IGNumericAngleAxis treats the data as continuously varying numerical labels with the marker placed at a point along the IGNumericAngleAxis. This point varies according to the value in a data column mapped using the anglePath property of the IGPolarSeriesDataSourceHelper in the Polar Series chart type. For details on the IGNumericAngleAxis, refer to the Configuring Numeric Angle Axis topic.

The following image illustrates a sample IGNumericAngleAxis.

IGNumericRadiusAxis

The IGNumericRadiusAxis treats the data as continuously varying numerical labels with the marker placed at a point along the IGNumericRadiusAxis. This point varies according to the value in the data column mapped using the radiusPath property of the IGPolarSeriesDataSourceHelper in the Polar Series chart type or the valuePath property of the IGCategorySeriesDataSourceHelper in the Radial Series chart type. For details on IGNumericRadiusAxis, refer to the Configuring Numeric Radius Axis topic.

IGCategoryAngleAxis

The IGCategoryAngleAxis treats the data as a sequence of non-numerical text labels with the marker placed at a point along the angle axis according to its position in the sequence. For details on the IGCategoryAngleAxis, refer to the Configuring Category Angle Axis topic.

The following image illustrates a sample IGCategoryAngleAxis.


Related Content

Topics

The following topics provide additional information related to this topic.

Topic

Purpose

In the IGChartView, you can use the IGCategoryXAxis object’s crossingAxis and crossingValue properties to change where the X-axis crosses the Y-axis.

This topic explains, with code examples, how to use axis scales and intervals on the IGChartView control.

This topic serves as a gateway to the features and functionality of the IGChartView control.

This topic demonstrates, with code examples, how to use IGCategoryAngleAxis in the IGChartView.

This topic demonstrates, with code examples, how to use IGNumericAngleAxis in the IGChartView.

This topic demonstrates, with code examples, how to use IGNumericRadusAxis in the IGChartView.