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.
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.
import { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartCategoryCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule, IgcDataChartStackedModule, IgcStackedFragmentSeriesModule } from'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcStackedColumnSeriesComponent, IgcStackedFragmentSeriesComponent, IgcDataToolTipLayerComponent } from'igniteui-webcomponents-charts';
import { ContinentsBirthRateItem, ContinentsBirthRate } from'./ContinentsBirthRate';
import { ModuleManager } from'igniteui-webcomponents-core';
import"./index.css";
ModuleManager.register(
IgcLegendModule,
IgcDataChartCoreModule,
IgcDataChartCategoryModule,
IgcDataChartCategoryCoreModule,
IgcDataChartInteractivityModule,
IgcDataChartAnnotationModule,
IgcDataChartStackedModule,
IgcStackedFragmentSeriesModule
);
exportclassSample{
private legend: IgcLegendComponent
private chart: IgcDataChartComponent
private xAxis: IgcCategoryXAxisComponent
private yAxis: IgcNumericYAxisComponent
private stackedColumnSeries: IgcStackedColumnSeriesComponent
private s1: IgcStackedFragmentSeriesComponent
private s2: IgcStackedFragmentSeriesComponent
private s3: IgcStackedFragmentSeriesComponent
private s4: IgcStackedFragmentSeriesComponent
private s5: IgcStackedFragmentSeriesComponent
private dataToolTipLayer: IgcDataToolTipLayerComponent
private _bind: () =>void;
constructor() {
var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;
var xAxis = this.xAxis = document.getElementById('xAxis') as IgcCategoryXAxisComponent;
var yAxis = this.yAxis = document.getElementById('yAxis') as IgcNumericYAxisComponent;
var stackedColumnSeries = this.stackedColumnSeries = document.getElementById('stackedColumnSeries') as IgcStackedColumnSeriesComponent;
var s1 = this.s1 = document.getElementById('s1') as IgcStackedFragmentSeriesComponent;
var s2 = this.s2 = document.getElementById('s2') as IgcStackedFragmentSeriesComponent;
var s3 = this.s3 = document.getElementById('s3') as IgcStackedFragmentSeriesComponent;
var s4 = this.s4 = document.getElementById('s4') as IgcStackedFragmentSeriesComponent;
var s5 = this.s5 = document.getElementById('s5') as IgcStackedFragmentSeriesComponent;
var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('dataToolTipLayer') as IgcDataToolTipLayerComponent;
this._bind = () => {
chart.legend = this.legend;
xAxis.dataSource = this.continentsBirthRate;
stackedColumnSeries.dataSource = this.continentsBirthRate;
stackedColumnSeries.xAxis = this.xAxis;
stackedColumnSeries.yAxis = this.yAxis;
}
this._bind();
}
private _continentsBirthRate: ContinentsBirthRate = null;
publicgetcontinentsBirthRate(): ContinentsBirthRate {
if (this._continentsBirthRate == null)
{
this._continentsBirthRate = new ContinentsBirthRate();
}
returnthis._continentsBirthRate;
}
}
new Sample();
ts
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><divclass="legend-title">
Annual Birth Rates by World Region
</div><divclass="legend"><igc-legendname="legend"id="legend"orientation="Horizontal"></igc-legend></div><divclass="container fill"><igc-data-chartname="chart"id="chart"is-horizontal-zoom-enabled="false"is-vertical-zoom-enabled="false"><igc-category-x-axisname="xAxis"id="xAxis"label="Year"gap="0.75"></igc-category-x-axis><igc-numeric-y-axisname="yAxis"id="yAxis"minimum-value="0"maximum-value="140"interval="20"title-left-margin="10"label-format="{0} m"></igc-numeric-y-axis><igc-stacked-column-seriesname="stackedColumnSeries"id="stackedColumnSeries"show-default-tooltip="false"><igc-stacked-fragment-seriesname="s1"id="s1"value-member-path="Asia"title="Asia"></igc-stacked-fragment-series><igc-stacked-fragment-seriesname="s2"id="s2"value-member-path="Africa"title="Africa"></igc-stacked-fragment-series><igc-stacked-fragment-seriesname="s3"id="s3"value-member-path="Europe"title="Europe"></igc-stacked-fragment-series><igc-stacked-fragment-seriesname="s4"id="s4"value-member-path="NorthAmerica"title="North America"></igc-stacked-fragment-series><igc-stacked-fragment-seriesname="s5"id="s5"value-member-path="SouthAmerica"title="South America"></igc-stacked-fragment-series></igc-stacked-column-series><igc-data-tool-tip-layername="dataToolTipLayer"id="dataToolTipLayer"></igc-data-tool-tip-layer></igc-data-chart></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><divclass="legend-title">
Highest Grossing Movie Franchises
</div><divclass="legend"><igc-legendname="legend"id="legend"orientation="Horizontal"></igc-legend></div><divclass="container fill"><igc-data-chartname="Chart"id="Chart"><igc-category-y-axisname="yAxis"id="yAxis"label="franchise"use-enhanced-interval-management="true"enhanced-interval-prefer-more-category-labels="true"is-inverted="true"gap="0.5"overlap="-0.1"></igc-category-y-axis><igc-numeric-x-axisname="xAxis"id="xAxis"title="Billions of U.S. Dollars"></igc-numeric-x-axis><igc-category-highlight-layername="CategoryHighlightLayer"id="CategoryHighlightLayer"></igc-category-highlight-layer><igc-bar-seriesname="BarSeries1"id="BarSeries1"title="Total Revenue of Franchise"value-member-path="totalRevenue"show-default-tooltip="true"is-transition-in-enabled="true"is-highlighting-enabled="true"></igc-bar-series><igc-bar-seriesname="BarSeries2"id="BarSeries2"title="Highest Grossing Movie in Series"value-member-path="highestGrossing"show-default-tooltip="true"is-transition-in-enabled="true"is-highlighting-enabled="true"></igc-bar-series><igc-data-tool-tip-layername="Tooltips"id="Tooltips"></igc-data-tool-tip-layer></igc-data-chart></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
<!DOCTYPE html><html><head><title>DataChartTypeScatterDensitySeries</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><divclass="container vertical"><divclass="options horizontal"><divclass="legend-title"><span>Stars Distribution in Milky Way Galaxy</span></div></div><igc-data-chartid="chart"width="100%"height="100%"is-horizontal-zoom-enabled="true"is-vertical-zoom-enabled="true"><igc-numeric-x-axisname="xAxis"abbreviate-large-numbers="true"title-bottom-margin="10"title="Plane of Rotation (in Light Years)"></igc-numeric-x-axis><igc-numeric-y-axisname="yAxis"abbreviate-large-numbers="true"title-bottom-margin="10"title="Plane of Rotation (in Light Years)"></igc-numeric-y-axis><igc-high-density-scatter-seriesid="series"x-axis-name="xAxis"y-axis-name="yAxis"title="Distribution"x-member-path="X"y-member-path="Y"show-default-tooltip="true"mouse-over-enabled="true"progressive-load="true"heat-minimum-color="Black"heat-maximum-color="Yellow"heat-maximum="1"heat-minimum="5"resolution="3"></igc-high-density-scatter-series></igc-data-chart></div></div></div><scriptsrc="src/index.ts"></script></body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
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.
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><divclass="legend-title">
Life Expectancy vs Health Expenditure
</div><divclass="legend"><igc-legendname="legend"id="legend"orientation="Horizontal"></igc-legend></div><divclass="container fill"><igc-data-chartname="chart"id="chart"><igc-numeric-x-axisname="xAxis"id="xAxis"title="Life Expectancy (in years)"minimum-value="72"maximum-value="84"interval="2"></igc-numeric-x-axis><igc-numeric-y-axisname="yAxis"id="yAxis"title="Health Expenditure per Capita"abbreviate-large-numbers="true"minimum-value="1000"maximum-value="6000"interval="1000"></igc-numeric-y-axis><igc-scatter-line-seriesname="ScatterLineSeries1"id="ScatterLineSeries1"title="Germany"x-member-path="lifeExpectancy"y-member-path="healthExpense"marker-type="Circle"show-default-tooltip="true"></igc-scatter-line-series><igc-scatter-line-seriesname="ScatterLineSeries2"id="ScatterLineSeries2"title="France"x-member-path="lifeExpectancy"y-member-path="healthExpense"marker-type="Circle"show-default-tooltip="true"></igc-scatter-line-series><igc-data-tool-tip-layername="dataToolTipLayer"id="dataToolTipLayer"></igc-data-tool-tip-layer></igc-data-chart></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
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 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.
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 the intervalType property. For example, if the intervalType is set to Days, then the numeric value specified in interval 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.
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.
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><divclass="legend-title">
Ronaldo vs Messi Player Stats
</div><divclass="legend"><igc-legendname="legend"id="legend"orientation="Horizontal"></igc-legend></div><divclass="container fill"><igc-data-chartname="chart"id="chart"is-horizontal-zoom-enabled="false"is-vertical-zoom-enabled="false"><igc-category-angle-axisname="angleAxis"id="angleAxis"label="attribute"></igc-category-angle-axis><igc-numeric-radius-axisname="radiusAxis"id="radiusAxis"inner-radius-extent-scale="0.1"interval="2"minimum-value="0"maximum-value="10"></igc-numeric-radius-axis><igc-radial-area-seriesname="RadialAreaSeries1"id="RadialAreaSeries1"value-member-path="ronaldo"show-default-tooltip="false"area-fill-opacity="0.5"thickness="3"title="Ronaldo"marker-type="Circle"></igc-radial-area-series><igc-radial-area-seriesname="RadialAreaSeries2"id="RadialAreaSeries2"value-member-path="messi"show-default-tooltip="false"area-fill-opacity="0.5"thickness="3"title="Messi"marker-type="Circle"></igc-radial-area-series><igc-data-tool-tip-layername="dataToolTipLayer"id="dataToolTipLayer"></igc-data-tool-tip-layer></igc-data-chart></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
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 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.
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><divclass="legend-title">
Wind Speed vs Boat Speed
</div><divclass="container fill"><igc-data-chartname="chart"id="chart"is-horizontal-zoom-enabled="false"is-vertical-zoom-enabled="false"><igc-numeric-angle-axisname="angleAxis"id="angleAxis"start-angle-offset="-90"interval="30"minimum-value="0"maximum-value="360"></igc-numeric-angle-axis><igc-numeric-radius-axisname="radiusAxis"id="radiusAxis"radius-extent-scale="0.9"inner-radius-extent-scale="0.1"interval="25"minimum-value="0"maximum-value="100"></igc-numeric-radius-axis><igc-polar-scatter-seriesname="PolarScatterSeries1"id="PolarScatterSeries1"angle-member-path="direction"radius-member-path="windSpeed"show-default-tooltip="false"title="Wind Speed"marker-type="Circle"></igc-polar-scatter-series><igc-polar-scatter-seriesname="PolarScatterSeries2"id="PolarScatterSeries2"angle-member-path="direction"radius-member-path="boatSpeed"show-default-tooltip="false"title="Boat Speed"marker-type="Circle"></igc-polar-scatter-series><igc-data-tool-tip-layername="dataToolTipLayer"id="dataToolTipLayer"></igc-data-tool-tip-layer></igc-data-chart></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
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.
<!DOCTYPE html><html><head><title>Sample | Ignite UI | Web Components | infragistics</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" /><linkrel="stylesheet"href="/src/index.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><divclass="legend-title">
Wind Speed vs Boat Speed
</div><divclass="legend"><igc-legendname="legend"id="legend"orientation="Horizontal"></igc-legend></div><divclass="container fill"><igc-data-chartname="chart"id="chart"is-horizontal-zoom-enabled="false"is-vertical-zoom-enabled="false"><igc-numeric-angle-axisname="angleAxis"id="angleAxis"start-angle-offset="-90"interval="30"minimum-value="0"maximum-value="360"></igc-numeric-angle-axis><igc-numeric-radius-axisname="radiusAxis"id="radiusAxis"radius-extent-scale="0.9"inner-radius-extent-scale="0.1"interval="25"minimum-value="0"maximum-value="100"></igc-numeric-radius-axis><igc-polar-line-seriesname="PolarLineSeries1"id="PolarLineSeries1"angle-member-path="direction"radius-member-path="windSpeed"show-default-tooltip="false"thickness="1"title="Wind Speed"marker-type="Circle"></igc-polar-line-series><igc-polar-line-seriesname="PolarLineSeries2"id="PolarLineSeries2"angle-member-path="direction"radius-member-path="boatSpeed"show-default-tooltip="false"thickness="1"title="Boat Speed"marker-type="Circle"></igc-polar-line-series><igc-data-tool-tip-layername="dataToolTipLayer"id="dataToolTipLayer"></igc-data-tool-tip-layer></igc-data-chart></div></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Additional Resources
You can find more information about related chart features in these topics: