Web Components Axis Types
The Ignite UI for Web Components Category Chart uses only one IgcCategoryXAxisComponent
and one IgcNumericYAxisComponent
type. Similarly, Ignite UI for Web Components Financial Chart uses only one IgcTimeXAxisComponent
and one IgcNumericYAxisComponent
types. However, the Ignite UI for Web Components Data Chart provides support for multiple axis types that you can position on any side of the chart by setting axis location or even inside of the chart by using axis crossing properties. This topic goes over each one, which axes and series are compatible with each other, and some specific properties to the unique axes.
Cartesian Axes
The IgcDataChartComponent
with Cartesian Axes, allows you to plot data in horizontal (X-axis) and vertical (X-axis) direction with 3 types of X-Axis
(IgcCategoryXAxisComponent
, IgcNumericXAxisComponent
, and IgcTimeXAxisComponent
) and 2 types of Y-Axis (IgcCategoryYAxisComponent
and IgcNumericYAxisComponent
).
Category X-Axis
The IgcCategoryXAxisComponent
treats its data as a sequence of categorical data items. It can display almost any type of data including strings and numbers. If you are plotting numbers on this axis, it is important to keep in mind that this axis is a discrete axis and not continuous. This means that each categorical data item will be placed equidistant from the one before it. The items will also be plotted in the order that they appear in the axis' data source.
The IgcCategoryXAxisComponent
requires you to provide a DataSource
and a label
in order to plot data with it. It is generally used with the IgcNumericYAxisComponent
to plot the following type of series:
The following example demonstrates usage of the IgcCategoryXAxisComponent
type:
Category Y-Axis
The IgcCategoryYAxisComponent
works very similarly to the IgcCategoryXAxisComponent
described above, but it is placed vertically rather than horizontally. Also, this axis requires you to provide a DataSource
and a label
in order to plot data with it. The IgcCategoryYAxisComponent
is generally used with the IgcNumericXAxisComponent
to plot the following type of series:
The following example demonstrates usage of the IgcCategoryYAxisComponent
type:
Numeric X-Axis
The IgcNumericXAxisComponent
treats its data as continuously varying numerical data items. Labels on this axis are placed horizontally along the X-Axis. The location of the IgcNumericXAxisComponent
labels depends on the XMemberPath
property of the various Scatter Series that it supports if combined with a IgcNumericYAxisComponent
. Alternatively, if combined with the IgcCategoryXAxisComponent
, these labels will be placed corresponding to the ValueMemberPath
of the IgcBarSeriesComponent
, IgcStackedBarSeriesComponent
, and IgcStacked100BarSeriesComponent
.
The IgcNumericXAxisComponent
is compatible with the following type of series:
IgcBarSeriesComponent
IgcBubbleSeriesComponent
IgcHighDensityScatterSeriesComponent
IgcScatterSeriesComponent
IgcScatterLineSeriesComponent
IgcScatterSplineSeriesComponent
IgcScatterAreaSeriesComponent
IgcScatterContourSeriesComponent
IgcScatterPolylineSeriesComponent
IgcScatterPolygonSeriesComponent
IgcStackedBarSeriesComponent
IgcStacked100BarSeriesComponent
The following example demonstrates usage of the IgcNumericXAxisComponent
:
Numeric Y-Axis
The IgcNumericYAxisComponent
treats its data as continuously varying numerical data items. Labels on this axis are placed vertically along the Y-Axis. The location of the IgcNumericYAxisComponent
labels depends on the YMemberPath
property of the various ScatterSeries that is supports if combined with a IgcNumericXAxisComponent
. Alternatively, if combined with the IgcCategoryYAxisComponent
, these labels will be placed corresponding to the ValueMemberPath
of the category or stacked series mentioned in the table above. If you are using one of the financial series, they will be placed corresponding to the Open/High/Low/Close paths and the series type that you are using.
The IgcNumericYAxisComponent
is compatible with the following type of series:
The following example demonstrates usage of the IgcNumericYAxisComponent
:
Time X Axis
The IgcTimeXAxisComponent
treats its data as a sequence of data items, sorted by date. Labels on this axis type are dates and can be formatted and arranged according to date intervals. The date range of this axis is determined by the date values in a data column that is mapped using its DateTimeMemberPath
. This, along with a DataSource
is required to plot data with this axis type.
The IgcTimeXAxisComponent
is the X-Axis type in the IgcFinancialChartComponent
component.
Breaks in Time X Axis
The IgcTimeXAxisComponent
has the option to exclude intervals of data by using breaks
. As a result, the labels and plotted data will not appear at the excluded interval. For example, working/non-working days, holidays, and/or weekends. An instance of IgcTimeAxisBreakComponent
can be added to the Breaks
collection of the axis and configured by using a unique start
, end
and interval
.
Formating in Time X Axis
The IgcTimeXAxisComponent
has the labelFormats
property, which represents a collection of IgcTimeAxisLabelFormatComponent
objects. Each IgcTimeAxisLabelFormatComponent
added to the collection is responsible for assigning a unique format
and range
. This can be especially useful for drilling down data from years to milliseconds and adjusting the labels depending on the range of time shown by the chart.
The format
property of the IgcTimeAxisLabelFormatComponent
specifies what format to use for a particular visible range. The range
property of the IgcTimeAxisLabelFormatComponent
specifies the visible range at which the axis label formats will switch to a different format. For example, if you have two IgcTimeAxisLabelFormatComponent
elements with a range set to 10 days and another set to 5 hours, then as soon as the visible range of the axis becomes less than 10 days, it will switch to 5-hour format.
Intervals in Time X Axis
The IgcTimeXAxisComponent
replaces the conventional interval
property of the category and numeric axes with an intervals
collection of type IgcTimeAxisIntervalComponent
. Each IgcTimeAxisIntervalComponent
added to the collection is responsible for assigning a unique interval
, range
and intervalType
. This can be especially useful for drilling down data from years to milliseconds to provide unique spacing between labels depending on the range of time shown by the chart. A description of these properties is below:
interval
: This specifies the interval to use. This is tied to theintervalType
property. For example, if theintervalType
is set toDays
, then the numeric value specified ininterval
will be in days.range
: This specifies the visible range at which the axis interval will switch to a different interval. For example, if you have two TimeAxisInterval with a range set to 10 days and another set to 5 hours, as soon as the visible range in the axis becomes less than 10 days it will switch to the interval whose range is 5 hours.intervalType
: This specifies the unit of time for theinterval
property.
Polar Axes
The IgcDataChartComponent
with Polar Axes, allows you to plot data outwards (radius axis) from center of the chart and around (angle axis) of center of the chart.
Category Angle Axis
The IgcCategoryAngleAxisComponent
treats its data as a sequence of category data items. The labels on this axis are placed along the edge of a circle according to their position in that sequence. This type of axis can display almost any type of data including strings and numbers.
The IgcCategoryAngleAxisComponent
is generally used with the IgcNumericRadiusAxisComponent
to plot Radial Series.
The following example demonstrates usage of the IgcCategoryAngleAxisComponent
type:
Proportional Category Angle Axis
The IgcProportionalCategoryAngleAxisComponent
treats its data as a sequence of category data items. The labels on this axis are placed along the edge of a circle according to their position in that sequence. This type of axis can display almost any type of data including strings and numbers.
The IgcProportionalCategoryAngleAxisComponent
is generally used with the IgcNumericRadiusAxisComponent
to plot a pie chart eg. Radial Series.
The following example demonstrates usage of the IgcProportionalCategoryAngleAxisComponent
type:
Numeric Angle Axis
The IgcNumericAngleAxisComponent
treats its data as continuously varying numerical data items. The labels on this axis area placed along a radius line starting from the center of the circular plot. The location of the labels on the IgcNumericAngleAxisComponent
varies according to the value in the data column mapped using the RadiusMemberPath
property of the Polar Series object or the ValueMemberPath
property of the Radial Series object.
The The IgcNumericAngleAxisComponent
can be used with either the IgcCategoryAngleAxisComponent
to plot Radial Series or with the IgcNumericRadiusAxisComponent
to plot Polar Series respectively.
The following example demonstrates usage of the IgcNumericAngleAxisComponent
type:
Numeric Radius Axis
The IgcNumericRadiusAxisComponent
treats the data as continuously varying numerical data items. The labels on this axis are placed around the circular plot. The location of the labels varies according to the value in a data column mapped using the AngleMemberPath
property of the corresponding polar series.
The IgcNumericRadiusAxisComponent
can be used with the IgcNumericRadiusAxisComponent
to plot Polar Series.
The following example demonstrates usage of the IgcNumericRadiusAxisComponent
type:
Additional Resources
You can find more information about related chart features in these topics: