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:

Category Series	Stacked Series	Financial Series
- IgcAreaSeriesComponent - IgcColumnSeriesComponent - IgcLineSeriesComponent - IgcPointSeriesComponent - IgcSplineSeriesComponent - IgcSplineAreaSeriesComponent - IgcStepLineSeriesComponent - IgcStepAreaSeriesComponent - IgcRangeAreaSeriesComponent - IgcRangeColumnSeriesComponent - IgcWaterfallSeriesComponent	- IgcStackedAreaSeriesComponent - IgcStackedColumnSeriesComponent - IgcStackedLineSeriesComponent - IgcStackedSplineSeriesComponent - IgcStacked100AreaSeriesComponent - IgcStacked100ColumnSeriesComponent - IgcStacked100LineSeriesComponent - IgcStacked100SplineSeriesComponent	- IgcFinancialPriceSeriesComponent - IgcBollingerBandsOverlayComponent - IgcForceIndexIndicatorComponent - IgcMedianPriceIndicatorComponent - IgcMassIndexIndicatorComponent - IgcRelativeStrengthIndexIndicatorComponent - IgcStandardDeviationIndicatorComponent - IgcTypicalPriceIndicatorComponent

The following example demonstrates usage of the IgcCategoryXAxisComponent type:

EXAMPLE

DATA

TS

HTML

CSS

export class ContinentsBirthRateItem {
    public constructor(init: Partial<ContinentsBirthRateItem>) {
        Object.assign(this, init);
    }

    public Year: string;
    public Asia: number;
    public Africa: number;
    public Europe: number;
    public NorthAmerica: number;
    public SouthAmerica: number;
    public Oceania: number;

}
export class ContinentsBirthRate extends Array<ContinentsBirthRateItem> {
    public constructor(items: Array<ContinentsBirthRateItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new ContinentsBirthRateItem(
                {
                    Year: `1950`,
                    Asia: 62,
                    Africa: 13,
                    Europe: 10,
                    NorthAmerica: 4,
                    SouthAmerica: 8,
                    Oceania: 1
                }),
                new ContinentsBirthRateItem(
                {
                    Year: `1960`,
                    Asia: 68,
                    Africa: 12,
                    Europe: 15,
                    NorthAmerica: 4,
                    SouthAmerica: 9,
                    Oceania: 2
                }),
                new ContinentsBirthRateItem(
                {
                    Year: `1970`,
                    Asia: 80,
                    Africa: 17,
                    Europe: 11,
                    NorthAmerica: 3,
                    SouthAmerica: 9,
                    Oceania: 1
                }),
                new ContinentsBirthRateItem(
                {
                    Year: `1980`,
                    Asia: 77,
                    Africa: 21,
                    Europe: 12,
                    NorthAmerica: 3,
                    SouthAmerica: 10,
                    Oceania: 2
                }),
                new ContinentsBirthRateItem(
                {
                    Year: `1990`,
                    Asia: 87,
                    Africa: 24,
                    Europe: 9,
                    NorthAmerica: 3,
                    SouthAmerica: 10,
                    Oceania: 1
                }),
                new ContinentsBirthRateItem(
                {
                    Year: `2000`,
                    Asia: 79,
                    Africa: 28,
                    Europe: 8,
                    NorthAmerica: 4,
                    SouthAmerica: 9,
                    Oceania: 3
                }),
                new ContinentsBirthRateItem(
                {
                    Year: `2010`,
                    Asia: 78,
                    Africa: 35,
                    Europe: 10,
                    NorthAmerica: 4,
                    SouthAmerica: 8,
                    Oceania: 2
                }),
                new ContinentsBirthRateItem(
                {
                    Year: `2020`,
                    Asia: 75,
                    Africa: 43,
                    Europe: 7,
                    NorthAmerica: 4,
                    SouthAmerica: 7,
                    Oceania: 4
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsCOPY CODE

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
);

export class Sample {

    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;
    public get continentsBirthRate(): ContinentsBirthRate {
        if (this._continentsBirthRate == null)
        {
            this._continentsBirthRate = new ContinentsBirthRate();
        }
        return this._continentsBirthRate;
    }

}

new Sample();
tsCOPY CODE

<!DOCTYPE html>
<html>
  <head>
    <title>Sample | Ignite UI | Web Components | infragistics</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
    <link rel="stylesheet" href="/src/index.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">

    <div class="legend-title">
        Annual Birth Rates by World Region
    </div>

    <div class="legend">
        <igc-legend
        name="legend"
        id="legend"
        orientation="Horizontal">
        </igc-legend>
    </div>

    <div class="container fill">
        <igc-data-chart
        name="chart"
        id="chart"
        is-horizontal-zoom-enabled="false"
        is-vertical-zoom-enabled="false">
            <igc-category-x-axis
            name="xAxis"
            id="xAxis"
            label="Year"
            gap="0.75">
            </igc-category-x-axis>
            <igc-numeric-y-axis
            name="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-series
            name="stackedColumnSeries"
            id="stackedColumnSeries"
            show-default-tooltip="false">
                <igc-stacked-fragment-series
                name="s1"
                id="s1"
                value-member-path="Asia"
                title="Asia">
                </igc-stacked-fragment-series>
                <igc-stacked-fragment-series
                name="s2"
                id="s2"
                value-member-path="Africa"
                title="Africa">
                </igc-stacked-fragment-series>
                <igc-stacked-fragment-series
                name="s3"
                id="s3"
                value-member-path="Europe"
                title="Europe">
                </igc-stacked-fragment-series>
                <igc-stacked-fragment-series
                name="s4"
                id="s4"
                value-member-path="NorthAmerica"
                title="North America">
                </igc-stacked-fragment-series>
                <igc-stacked-fragment-series
                name="s5"
                id="s5"
                value-member-path="SouthAmerica"
                title="South America">
                </igc-stacked-fragment-series>
            </igc-stacked-column-series>
            <igc-data-tool-tip-layer
            name="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) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>htmlCOPY CODE

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

cssCOPY CODE

Edit in: Codesandbox

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.

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:

• IgcBarSeriesComponent
• IgcStackedBarSeriesComponent
• IgcStacked100BarSeriesComponent

The following example demonstrates usage of the IgcCategoryYAxisComponent type:

EXAMPLE

DATA

TS

HTML

CSS

export class HighestGrossingMoviesItem {
    public constructor(init: Partial<HighestGrossingMoviesItem>) {
        Object.assign(this, init);
    }

    public franchise: string;
    public totalRevenue: number;
    public highestGrossing: number;

}
export class HighestGrossingMovies extends Array<HighestGrossingMoviesItem> {
    public constructor(items: Array<HighestGrossingMoviesItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new HighestGrossingMoviesItem(
                {
                    franchise: `Marvel Universe`,
                    totalRevenue: 22.55,
                    highestGrossing: 2.8
                }),
                new HighestGrossingMoviesItem(
                {
                    franchise: `Star Wars`,
                    totalRevenue: 10.32,
                    highestGrossing: 2.07
                }),
                new HighestGrossingMoviesItem(
                {
                    franchise: `Harry Potter`,
                    totalRevenue: 9.19,
                    highestGrossing: 1.34
                }),
                new HighestGrossingMoviesItem(
                {
                    franchise: `Avengers`,
                    totalRevenue: 7.76,
                    highestGrossing: 2.8
                }),
                new HighestGrossingMoviesItem(
                {
                    franchise: `Spider Man`,
                    totalRevenue: 7.22,
                    highestGrossing: 1.28
                }),
                new HighestGrossingMoviesItem(
                {
                    franchise: `James Bond`,
                    totalRevenue: 7.12,
                    highestGrossing: 1.11
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsCOPY CODE

import { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartCategoryCoreModule, IgcDataChartCategoryModule, IgcDataChartInteractivityModule, IgcDataChartVerticalCategoryModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryYAxisComponent, IgcNumericXAxisComponent, IgcCategoryHighlightLayerComponent, IgcBarSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
import { HighestGrossingMoviesItem, HighestGrossingMovies } from './HighestGrossingMovies';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";


ModuleManager.register(
    IgcLegendModule,
    IgcDataChartCoreModule,
    IgcDataChartCategoryCoreModule,
    IgcDataChartCategoryModule,
    IgcDataChartInteractivityModule,
    IgcDataChartVerticalCategoryModule,
    IgcDataChartAnnotationModule
);

export class Sample {

    private legend: IgcLegendComponent
    private chart: IgcDataChartComponent
    private yAxis: IgcCategoryYAxisComponent
    private xAxis: IgcNumericXAxisComponent
    private categoryHighlightLayer: IgcCategoryHighlightLayerComponent
    private barSeries1: IgcBarSeriesComponent
    private barSeries2: IgcBarSeriesComponent
    private tooltips: IgcDataToolTipLayerComponent
    private _bind: () => void;

    constructor() {
        var legend = this.legend = document.getElementById('legend') as IgcLegendComponent;
        var chart = this.chart = document.getElementById('Chart') as IgcDataChartComponent;
        var yAxis = this.yAxis = document.getElementById('yAxis') as IgcCategoryYAxisComponent;
        var xAxis = this.xAxis = document.getElementById('xAxis') as IgcNumericXAxisComponent;
        var categoryHighlightLayer = this.categoryHighlightLayer = document.getElementById('CategoryHighlightLayer') as IgcCategoryHighlightLayerComponent;
        var barSeries1 = this.barSeries1 = document.getElementById('BarSeries1') as IgcBarSeriesComponent;
        var barSeries2 = this.barSeries2 = document.getElementById('BarSeries2') as IgcBarSeriesComponent;
        var tooltips = this.tooltips = document.getElementById('Tooltips') as IgcDataToolTipLayerComponent;

        this._bind = () => {
            chart.legend = this.legend;
            yAxis.dataSource = this.highestGrossingMovies;
            barSeries1.xAxis = this.xAxis;
            barSeries1.yAxis = this.yAxis;
            barSeries1.dataSource = this.highestGrossingMovies;
            barSeries2.xAxis = this.xAxis;
            barSeries2.yAxis = this.yAxis;
            barSeries2.dataSource = this.highestGrossingMovies;
        }
        this._bind();
    }

    private _highestGrossingMovies: HighestGrossingMovies = null;
    public get highestGrossingMovies(): HighestGrossingMovies {
        if (this._highestGrossingMovies == null)
        {
            this._highestGrossingMovies = new HighestGrossingMovies();
        }
        return this._highestGrossingMovies;
    }

}

new Sample();
tsCOPY CODE

<!DOCTYPE html>
<html>
  <head>
    <title>Sample | Ignite UI | Web Components | infragistics</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
    <link rel="stylesheet" href="/src/index.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">

    <div class="legend-title">
        Highest Grossing Movie Franchises
    </div>

    <div class="legend">
        <igc-legend
        name="legend"
        id="legend"
        orientation="Horizontal">
        </igc-legend>
    </div>

    <div class="container fill">
        <igc-data-chart
        name="Chart"
        id="Chart">
            <igc-category-y-axis
            name="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-axis
            name="xAxis"
            id="xAxis"
            title="Billions of U.S. Dollars">
            </igc-numeric-x-axis>
            <igc-category-highlight-layer
            name="CategoryHighlightLayer"
            id="CategoryHighlightLayer">
            </igc-category-highlight-layer>
            <igc-bar-series
            name="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-series
            name="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-layer
            name="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) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>htmlCOPY CODE

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

cssCOPY CODE

Edit in: Codesandbox

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:

EXAMPLE

DATA

TS

HTML

CSS

export class SampleDensityData {

    public static create(): any[] {
        const amount = 25000;
        let data: any[] = [];
        this.generate(data, amount / 2, 0, 0, 75000, 20000);
        this.generate(data, amount / 4, 0, 0, 100000, 25000);
        this.generate(data, amount / 8, 0, 0, 150000, 30000);
        this.generate(data, amount / 8, 0, 0, 200000, 75000);

        return data;
    }

    public static generate(data: any[], count: number,
        centerX: number, centerY: number,
        spreadX: number, spreadY: number): any[] {

        // const data: any[] = [];
        for (let i = 0; i <= count; i++)
        {
            let rangeX = Math.random() * spreadX;
            let rangeY = Math.random() * spreadY;
            const flip = 1;
            const prop = Math.random();
            if (prop < .25) {
                rangeX *= flip;
                rangeY *= flip;
            }
            else if (prop >= .25 && prop < .5) {
                rangeX *= -flip;
                rangeY *= flip;
            }
            else if (prop >= .5 && prop < .75) {
                rangeX *= flip;
                rangeY *= -flip;
            }
            else {
                rangeX *= -flip;
                rangeY *= -flip;
            }
            const dispersionX = Math.random() + 0.12;
            const dispersionY = Math.random() + 0.12;
            const x = Math.round(centerX + (rangeX * dispersionX));
            const y = Math.round(centerY + (rangeY * dispersionY));
            data.push({ "X": x, "Y": y });
        }
        return data;
    }
}
tsCOPY CODE

import { SampleDensityData } from './SampleDensityData';
import { IgcDataChartComponent } from 'igniteui-webcomponents-charts';
import { IgcDataChartCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartScatterCoreModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartScatterModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { IgcHighDensityScatterSeriesModule } from 'igniteui-webcomponents-charts';
import { IgcHighDensityScatterSeriesComponent } from 'igniteui-webcomponents-charts';
import { IgcNumberAbbreviatorModule } from 'igniteui-webcomponents-charts';
import { IgcNumericYAxisModule } from 'igniteui-webcomponents-charts';
import { IgcNumericXAxisModule } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(
    IgcDataChartCoreModule,
    IgcDataChartScatterCoreModule,
    IgcDataChartScatterModule,
    IgcDataChartInteractivityModule,
    IgcNumberAbbreviatorModule,
    IgcHighDensityScatterSeriesModule,
    IgcNumericYAxisModule,
    IgcNumericXAxisModule
);

export class DataChartTypeScatterDensitySeries {
    constructor() {
        let chart = document.getElementById('chart') as IgcDataChartComponent;
        chart.dataSource = SampleDensityData.create();
    }
}

new DataChartTypeScatterDensitySeries();
tsCOPY CODE

<!DOCTYPE html>
<html>
  <head>
    <title>DataChartTypeScatterDensitySeries</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">
    <div class="container vertical">

        <div class="options horizontal">
            <div class="legend-title">
                <span>Stars Distribution in Milky Way Galaxy</span>
            </div>
        </div>

        <igc-data-chart
            id="chart"
            width="100%"
            height="100%"
            is-horizontal-zoom-enabled="true"
            is-vertical-zoom-enabled="true">
            <igc-numeric-x-axis
                name="xAxis"
                abbreviate-large-numbers="true"
                title-bottom-margin="10"
                title="Plane of Rotation (in Light Years)"></igc-numeric-x-axis>
            <igc-numeric-y-axis
                name="yAxis"
                abbreviate-large-numbers="true"
                title-bottom-margin="10"
                title="Plane of Rotation (in Light Years)"></igc-numeric-y-axis>
            <igc-high-density-scatter-series
                id="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>
    <script src="src/index.ts"></script>

  </body>
</html>htmlCOPY CODE

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */cssCOPY CODE

Edit in: Codesandbox

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:

Category Series	Stacked Series	Financial Series	Scatter Series
- IgcAreaSeriesComponent - IgcColumnSeriesComponent - IgcLineSeriesComponent - IgcPointSeriesComponent - IgcSplineSeriesComponent - IgcSplineAreaSeriesComponent - IgcStepLineSeriesComponent - IgcStepAreaSeriesComponent - IgcRangeAreaSeriesComponent - IgcRangeColumnSeriesComponent - IgcWaterfallSeriesComponent	- IgcStackedAreaSeriesComponent - IgcStackedColumnSeriesComponent - IgcStackedLineSeriesComponent - IgcStackedSplineSeriesComponent - IgcStacked100AreaSeriesComponent - IgcStacked100ColumnSeriesComponent - IgcStacked100LineSeriesComponent - IgcStacked100SplineSeriesComponent	- IgcFinancialPriceSeriesComponent - IgcBollingerBandsOverlayComponent - IgcForceIndexIndicatorComponent - IgcMedianPriceIndicatorComponent - IgcMassIndexIndicatorComponent - IgcRelativeStrengthIndexIndicatorComponent - IgcStandardDeviationIndicatorComponent - IgcTypicalPriceIndicatorComponent	- IgcBubbleSeriesComponent - IgcHighDensityScatterSeriesComponent - IgcScatterSeriesComponent - IgcScatterLineSeriesComponent - IgcScatterSplineSeriesComponent - IgcScatterAreaSeriesComponent - IgcScatterContourSeriesComponent - IgcScatterPolylineSeriesComponent - IgcScatterPolygonSeriesComponent

The following example demonstrates usage of the IgcNumericYAxisComponent:

EXAMPLE

HealthDataForFrance.ts

HealthDataForGermany.ts

TS

HTML

CSS

export class HealthDataForFranceItem {
    public constructor(init: Partial<HealthDataForFranceItem>) {
        Object.assign(this, init);
    }

    public year: number;
    public healthExpense: number;
    public lifeExpectancy: number;
    public name: string;

}
export class HealthDataForFrance extends Array<HealthDataForFranceItem> {
    public constructor(items: Array<HealthDataForFranceItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new HealthDataForFranceItem(
                {
                    year: 1985,
                    healthExpense: 2025.98,
                    lifeExpectancy: 75.92,
                    name: `Norway`
                }),
                new HealthDataForFranceItem(
                {
                    year: 1986,
                    healthExpense: 2075.21,
                    lifeExpectancy: 76.24,
                    name: `Norway`
                }),
                new HealthDataForFranceItem(
                {
                    year: 1987,
                    healthExpense: 2140.51,
                    lifeExpectancy: 76.08,
                    name: `Norway`
                }),
                new HealthDataForFranceItem(
                {
                    year: 1988,
                    healthExpense: 2119.07,
                    lifeExpectancy: 76.22,
                    name: `Norway`
                }),
                new HealthDataForFranceItem(
                {
                    year: 1989,
                    healthExpense: 2112.67,
                    lifeExpectancy: 76.5,
                    name: `Norway`
                }),
                new HealthDataForFranceItem(
                {
                    year: 1990,
                    healthExpense: 2519.81,
                    lifeExpectancy: 76.54,
                    name: `Norway`
                }),
                new HealthDataForFranceItem(
                {
                    year: 1991,
                    healthExpense: 2660.33,
                    lifeExpectancy: 76.98,
                    name: `Norway`
                }),
                new HealthDataForFranceItem(
                {
                    year: 1992,
                    healthExpense: 2737.93,
                    lifeExpectancy: 77.18,
                    name: `Norway`
                }),
                new HealthDataForFranceItem(
                {
                    year: 1993,
                    healthExpense: 2761.36,
                    lifeExpectancy: 77.15,
                    name: `Norway`
                }),
                new HealthDataForFranceItem(
                {
                    year: 1994,
                    healthExpense: 2800.17,
                    lifeExpectancy: 77.69,
                    name: `Norway`
                }),
                new HealthDataForFranceItem(
                {
                    year: 1995,
                    healthExpense: 2863.39,
                    lifeExpectancy: 77.74,
                    name: `Norway`
                }),
                new HealthDataForFranceItem(
                {
                    year: 1996,
                    healthExpense: 3034.79,
                    lifeExpectancy: 78.15,
                    name: `Norway`
                }),
                new HealthDataForFranceItem(
                {
                    year: 1997,
                    healthExpense: 3426.25,
                    lifeExpectancy: 78.14,
                    name: `Norway`
                }),
                new HealthDataForFranceItem(
                {
                    year: 1998,
                    healthExpense: 3639.47,
                    lifeExpectancy: 78.33,
                    name: `Norway`
                }),
                new HealthDataForFranceItem(
                {
                    year: 1999,
                    healthExpense: 3826.04,
                    lifeExpectancy: 78.28,
                    name: `Norway`
                }),
                new HealthDataForFranceItem(
                {
                    year: 2000,
                    healthExpense: 4003.97,
                    lifeExpectancy: 78.63,
                    name: `Norway`
                }),
                new HealthDataForFranceItem(
                {
                    year: 2001,
                    healthExpense: 4139.3,
                    lifeExpectancy: 78.79,
                    name: `Norway`
                }),
                new HealthDataForFranceItem(
                {
                    year: 2002,
                    healthExpense: 4504.06,
                    lifeExpectancy: 78.99,
                    name: `Norway`
                }),
                new HealthDataForFranceItem(
                {
                    year: 2003,
                    healthExpense: 4633.59,
                    lifeExpectancy: 79.39,
                    name: `Norway`
                }),
                new HealthDataForFranceItem(
                {
                    year: 2004,
                    healthExpense: 4734.15,
                    lifeExpectancy: 79.84,
                    name: `Norway`
                }),
                new HealthDataForFranceItem(
                {
                    year: 2005,
                    healthExpense: 4822.75,
                    lifeExpectancy: 80.04,
                    name: `Norway`
                }),
                new HealthDataForFranceItem(
                {
                    year: 2006,
                    healthExpense: 4846.36,
                    lifeExpectancy: 80.34,
                    name: `Norway`
                }),
                new HealthDataForFranceItem(
                {
                    year: 2007,
                    healthExpense: 4965.14,
                    lifeExpectancy: 80.4,
                    name: `Norway`
                }),
                new HealthDataForFranceItem(
                {
                    year: 2008,
                    healthExpense: 5149.6,
                    lifeExpectancy: 80.59,
                    name: `Norway`
                }),
                new HealthDataForFranceItem(
                {
                    year: 2009,
                    healthExpense: 5254.08,
                    lifeExpectancy: 80.8,
                    name: `Norway`
                }),
                new HealthDataForFranceItem(
                {
                    year: 2010,
                    healthExpense: 5240.42,
                    lifeExpectancy: 81,
                    name: `Norway`
                }),
                new HealthDataForFranceItem(
                {
                    year: 2011,
                    healthExpense: 5387.98,
                    lifeExpectancy: 81.3,
                    name: `Norway`
                }),
                new HealthDataForFranceItem(
                {
                    year: 2012,
                    healthExpense: 5499.09,
                    lifeExpectancy: 81.45,
                    name: `Norway`
                }),
                new HealthDataForFranceItem(
                {
                    year: 2013,
                    healthExpense: 5557.2,
                    lifeExpectancy: 81.75,
                    name: `Norway`
                }),
                new HealthDataForFranceItem(
                {
                    year: 2014,
                    healthExpense: 5730.16,
                    lifeExpectancy: 82.1,
                    name: `Norway`
                }),
                new HealthDataForFranceItem(
                {
                    year: 2015,
                    healthExpense: 5926.44,
                    lifeExpectancy: 82.3,
                    name: `Norway`
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsCOPY CODE

export class HealthDataForGermanyItem {
    public constructor(init: Partial<HealthDataForGermanyItem>) {
        Object.assign(this, init);
    }

    public year: number;
    public healthExpense: number;
    public lifeExpectancy: number;
    public name: string;

}
export class HealthDataForGermany extends Array<HealthDataForGermanyItem> {
    public constructor(items: Array<HealthDataForGermanyItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new HealthDataForGermanyItem(
                {
                    year: 1985,
                    healthExpense: 2579.64,
                    lifeExpectancy: 74.05,
                    name: `Germany`
                }),
                new HealthDataForGermanyItem(
                {
                    year: 1986,
                    healthExpense: 2603.94,
                    lifeExpectancy: 74.31,
                    name: `Germany`
                }),
                new HealthDataForGermanyItem(
                {
                    year: 1987,
                    healthExpense: 2668.49,
                    lifeExpectancy: 74.56,
                    name: `Germany`
                }),
                new HealthDataForGermanyItem(
                {
                    year: 1988,
                    healthExpense: 2812.94,
                    lifeExpectancy: 74.79,
                    name: `Germany`
                }),
                new HealthDataForGermanyItem(
                {
                    year: 1989,
                    healthExpense: 2689.51,
                    lifeExpectancy: 75.01,
                    name: `Germany`
                }),
                new HealthDataForGermanyItem(
                {
                    year: 1990,
                    healthExpense: 2774.68,
                    lifeExpectancy: 75.23,
                    name: `Germany`
                }),
                new HealthDataForGermanyItem(
                {
                    year: 1992,
                    healthExpense: 2909.85,
                    lifeExpectancy: 75.82,
                    name: `Germany`
                }),
                new HealthDataForGermanyItem(
                {
                    year: 1993,
                    healthExpense: 2853.09,
                    lifeExpectancy: 75.87,
                    name: `Germany`
                }),
                new HealthDataForGermanyItem(
                {
                    year: 1994,
                    healthExpense: 2989.64,
                    lifeExpectancy: 76.27,
                    name: `Germany`
                }),
                new HealthDataForGermanyItem(
                {
                    year: 1995,
                    healthExpense: 3122.13,
                    lifeExpectancy: 76.42,
                    name: `Germany`
                }),
                new HealthDataForGermanyItem(
                {
                    year: 1996,
                    healthExpense: 3241.89,
                    lifeExpectancy: 76.67,
                    name: `Germany`
                }),
                new HealthDataForGermanyItem(
                {
                    year: 1997,
                    healthExpense: 3257.29,
                    lifeExpectancy: 77.07,
                    name: `Germany`
                }),
                new HealthDataForGermanyItem(
                {
                    year: 1998,
                    healthExpense: 3327.26,
                    lifeExpectancy: 77.48,
                    name: `Germany`
                }),
                new HealthDataForGermanyItem(
                {
                    year: 1999,
                    healthExpense: 3414.57,
                    lifeExpectancy: 77.73,
                    name: `Germany`
                }),
                new HealthDataForGermanyItem(
                {
                    year: 2000,
                    healthExpense: 3536.35,
                    lifeExpectancy: 77.93,
                    name: `Germany`
                }),
                new HealthDataForGermanyItem(
                {
                    year: 2001,
                    healthExpense: 3603.77,
                    lifeExpectancy: 78.33,
                    name: `Germany`
                }),
                new HealthDataForGermanyItem(
                {
                    year: 2002,
                    healthExpense: 3687.38,
                    lifeExpectancy: 78.23,
                    name: `Germany`
                }),
                new HealthDataForGermanyItem(
                {
                    year: 2003,
                    healthExpense: 3745.14,
                    lifeExpectancy: 78.38,
                    name: `Germany`
                }),
                new HealthDataForGermanyItem(
                {
                    year: 2004,
                    healthExpense: 3704.96,
                    lifeExpectancy: 78.68,
                    name: `Germany`
                }),
                new HealthDataForGermanyItem(
                {
                    year: 2005,
                    healthExpense: 3787.13,
                    lifeExpectancy: 78.93,
                    name: `Germany`
                }),
                new HealthDataForGermanyItem(
                {
                    year: 2006,
                    healthExpense: 3875.14,
                    lifeExpectancy: 79.13,
                    name: `Germany`
                }),
                new HealthDataForGermanyItem(
                {
                    year: 2007,
                    healthExpense: 3950.17,
                    lifeExpectancy: 79.53,
                    name: `Germany`
                }),
                new HealthDataForGermanyItem(
                {
                    year: 2008,
                    healthExpense: 4079.09,
                    lifeExpectancy: 79.74,
                    name: `Germany`
                }),
                new HealthDataForGermanyItem(
                {
                    year: 2009,
                    healthExpense: 4232.58,
                    lifeExpectancy: 79.84,
                    name: `Germany`
                }),
                new HealthDataForGermanyItem(
                {
                    year: 2010,
                    healthExpense: 4358.61,
                    lifeExpectancy: 79.99,
                    name: `Germany`
                }),
                new HealthDataForGermanyItem(
                {
                    year: 2011,
                    healthExpense: 4396.44,
                    lifeExpectancy: 80.44,
                    name: `Germany`
                }),
                new HealthDataForGermanyItem(
                {
                    year: 2012,
                    healthExpense: 4516.99,
                    lifeExpectancy: 80.54,
                    name: `Germany`
                }),
                new HealthDataForGermanyItem(
                {
                    year: 2013,
                    healthExpense: 4589.37,
                    lifeExpectancy: 80.49,
                    name: `Germany`
                }),
                new HealthDataForGermanyItem(
                {
                    year: 2014,
                    healthExpense: 4684.49,
                    lifeExpectancy: 81.09,
                    name: `Germany`
                }),
                new HealthDataForGermanyItem(
                {
                    year: 2015,
                    healthExpense: 4772.33,
                    lifeExpectancy: 80.64,
                    name: `Germany`
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsCOPY CODE

import { IgcLegendModule, IgcNumberAbbreviatorModule, IgcDataChartCoreModule, IgcDataChartScatterModule, IgcDataChartScatterCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcNumericXAxisComponent, IgcNumericYAxisComponent, IgcScatterLineSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
import { HealthDataForGermanyItem, HealthDataForGermany } from './HealthDataForGermany';
import { HealthDataForFranceItem, HealthDataForFrance } from './HealthDataForFrance';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";


ModuleManager.register(
    IgcLegendModule,
    IgcNumberAbbreviatorModule,
    IgcDataChartCoreModule,
    IgcDataChartScatterModule,
    IgcDataChartScatterCoreModule,
    IgcDataChartInteractivityModule,
    IgcDataChartAnnotationModule
);

export class Sample {

    private legend: IgcLegendComponent
    private chart: IgcDataChartComponent
    private xAxis: IgcNumericXAxisComponent
    private yAxis: IgcNumericYAxisComponent
    private scatterLineSeries1: IgcScatterLineSeriesComponent
    private scatterLineSeries2: IgcScatterLineSeriesComponent
    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 IgcNumericXAxisComponent;
        var yAxis = this.yAxis = document.getElementById('yAxis') as IgcNumericYAxisComponent;
        var scatterLineSeries1 = this.scatterLineSeries1 = document.getElementById('ScatterLineSeries1') as IgcScatterLineSeriesComponent;
        var scatterLineSeries2 = this.scatterLineSeries2 = document.getElementById('ScatterLineSeries2') as IgcScatterLineSeriesComponent;
        var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('dataToolTipLayer') as IgcDataToolTipLayerComponent;

        this._bind = () => {
            chart.legend = this.legend;
            scatterLineSeries1.xAxis = this.xAxis;
            scatterLineSeries1.yAxis = this.yAxis;
            scatterLineSeries1.dataSource = this.healthDataForGermany;
            scatterLineSeries2.xAxis = this.xAxis;
            scatterLineSeries2.yAxis = this.yAxis;
            scatterLineSeries2.dataSource = this.healthDataForFrance;
        }
        this._bind();
    }

    private _healthDataForGermany: HealthDataForGermany = null;
    public get healthDataForGermany(): HealthDataForGermany {
        if (this._healthDataForGermany == null)
        {
            this._healthDataForGermany = new HealthDataForGermany();
        }
        return this._healthDataForGermany;
    }

    private _healthDataForFrance: HealthDataForFrance = null;
    public get healthDataForFrance(): HealthDataForFrance {
        if (this._healthDataForFrance == null)
        {
            this._healthDataForFrance = new HealthDataForFrance();
        }
        return this._healthDataForFrance;
    }

}

new Sample();
tsCOPY CODE

<!DOCTYPE html>
<html>
  <head>
    <title>Sample | Ignite UI | Web Components | infragistics</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
    <link rel="stylesheet" href="/src/index.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">

    <div class="legend-title">
        Life Expectancy vs Health Expenditure
    </div>

    <div class="legend">
        <igc-legend
        name="legend"
        id="legend"
        orientation="Horizontal">
        </igc-legend>
    </div>

    <div class="container fill">
        <igc-data-chart
        name="chart"
        id="chart">
            <igc-numeric-x-axis
            name="xAxis"
            id="xAxis"
            title="Life Expectancy (in years)"
            minimum-value="72"
            maximum-value="84"
            interval="2">
            </igc-numeric-x-axis>
            <igc-numeric-y-axis
            name="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-series
            name="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-series
            name="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-layer
            name="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) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>htmlCOPY CODE

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

cssCOPY CODE

Edit in: Codesandbox

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 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.
• intervalType: This specifies the unit of time for the interval 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:

EXAMPLE

DATA

TS

HTML

CSS

export class FootballPlayerStatsItem {
    public constructor(init: Partial<FootballPlayerStatsItem>) {
        Object.assign(this, init);
    }

    public attribute: string;
    public ronaldo: number;
    public messi: number;

}
export class FootballPlayerStats extends Array<FootballPlayerStatsItem> {
    public constructor(items: Array<FootballPlayerStatsItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new FootballPlayerStatsItem(
                {
                    attribute: `Dribbling`,
                    ronaldo: 8,
                    messi: 10
                }),
                new FootballPlayerStatsItem(
                {
                    attribute: `Passing`,
                    ronaldo: 8,
                    messi: 10
                }),
                new FootballPlayerStatsItem(
                {
                    attribute: `Finishing`,
                    ronaldo: 10,
                    messi: 10
                }),
                new FootballPlayerStatsItem(
                {
                    attribute: `Free Kicks`,
                    ronaldo: 8,
                    messi: 9
                }),
                new FootballPlayerStatsItem(
                {
                    attribute: `Penalties`,
                    ronaldo: 9,
                    messi: 7
                }),
                new FootballPlayerStatsItem(
                {
                    attribute: `Physical`,
                    ronaldo: 10,
                    messi: 7
                }),
                new FootballPlayerStatsItem(
                {
                    attribute: `Team Play`,
                    ronaldo: 7,
                    messi: 9
                }),
                new FootballPlayerStatsItem(
                {
                    attribute: `Heading`,
                    ronaldo: 9,
                    messi: 6
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsCOPY CODE

import { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartRadialModule, IgcDataChartRadialCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryAngleAxisComponent, IgcNumericRadiusAxisComponent, IgcRadialAreaSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
import { FootballPlayerStatsItem, FootballPlayerStats } from './FootballPlayerStats';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";


ModuleManager.register(
    IgcLegendModule,
    IgcDataChartCoreModule,
    IgcDataChartRadialModule,
    IgcDataChartRadialCoreModule,
    IgcDataChartInteractivityModule,
    IgcDataChartAnnotationModule
);

export class Sample {

    private legend: IgcLegendComponent
    private chart: IgcDataChartComponent
    private angleAxis: IgcCategoryAngleAxisComponent
    private radiusAxis: IgcNumericRadiusAxisComponent
    private radialAreaSeries1: IgcRadialAreaSeriesComponent
    private radialAreaSeries2: IgcRadialAreaSeriesComponent
    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 angleAxis = this.angleAxis = document.getElementById('angleAxis') as IgcCategoryAngleAxisComponent;
        var radiusAxis = this.radiusAxis = document.getElementById('radiusAxis') as IgcNumericRadiusAxisComponent;
        var radialAreaSeries1 = this.radialAreaSeries1 = document.getElementById('RadialAreaSeries1') as IgcRadialAreaSeriesComponent;
        var radialAreaSeries2 = this.radialAreaSeries2 = document.getElementById('RadialAreaSeries2') as IgcRadialAreaSeriesComponent;
        var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('dataToolTipLayer') as IgcDataToolTipLayerComponent;

        this._bind = () => {
            chart.legend = this.legend;
            angleAxis.dataSource = this.footballPlayerStats;
            radialAreaSeries1.dataSource = this.footballPlayerStats;
            radialAreaSeries1.angleAxis = this.angleAxis;
            radialAreaSeries1.valueAxis = this.radiusAxis;
            radialAreaSeries2.dataSource = this.footballPlayerStats;
            radialAreaSeries2.angleAxis = this.angleAxis;
            radialAreaSeries2.valueAxis = this.radiusAxis;
        }
        this._bind();
    }

    private _footballPlayerStats: FootballPlayerStats = null;
    public get footballPlayerStats(): FootballPlayerStats {
        if (this._footballPlayerStats == null)
        {
            this._footballPlayerStats = new FootballPlayerStats();
        }
        return this._footballPlayerStats;
    }

}

new Sample();
tsCOPY CODE

<!DOCTYPE html>
<html>
  <head>
    <title>Sample | Ignite UI | Web Components | infragistics</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
    <link rel="stylesheet" href="/src/index.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">

    <div class="legend-title">
        Ronaldo vs Messi Player Stats
    </div>

    <div class="legend">
        <igc-legend
        name="legend"
        id="legend"
        orientation="Horizontal">
        </igc-legend>
    </div>

    <div class="container fill">
        <igc-data-chart
        name="chart"
        id="chart"
        is-horizontal-zoom-enabled="false"
        is-vertical-zoom-enabled="false">
            <igc-category-angle-axis
            name="angleAxis"
            id="angleAxis"
            label="attribute">
            </igc-category-angle-axis>
            <igc-numeric-radius-axis
            name="radiusAxis"
            id="radiusAxis"
            inner-radius-extent-scale="0.1"
            interval="2"
            minimum-value="0"
            maximum-value="10">
            </igc-numeric-radius-axis>
            <igc-radial-area-series
            name="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-series
            name="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-layer
            name="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) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>htmlCOPY CODE

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

cssCOPY CODE

Edit in: Codesandbox

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:

EXAMPLE

Edit in: Codesandbox

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:

EXAMPLE

DATA

TS

HTML

CSS

export class BoatSailingDataItem {
    public constructor(init: Partial<BoatSailingDataItem>) {
        Object.assign(this, init);
    }

    public direction: number;
    public boatSpeed: number;
    public windSpeed: number;

}
export class BoatSailingData extends Array<BoatSailingDataItem> {
    public constructor(items: Array<BoatSailingDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new BoatSailingDataItem(
                {
                    direction: 0,
                    boatSpeed: 70,
                    windSpeed: 90
                }),
                new BoatSailingDataItem(
                {
                    direction: 45,
                    boatSpeed: 35,
                    windSpeed: 65
                }),
                new BoatSailingDataItem(
                {
                    direction: 90,
                    boatSpeed: 25,
                    windSpeed: 45
                }),
                new BoatSailingDataItem(
                {
                    direction: 135,
                    boatSpeed: 15,
                    windSpeed: 25
                }),
                new BoatSailingDataItem(
                {
                    direction: 180,
                    boatSpeed: 0,
                    windSpeed: 0
                }),
                new BoatSailingDataItem(
                {
                    direction: 225,
                    boatSpeed: 15,
                    windSpeed: 25
                }),
                new BoatSailingDataItem(
                {
                    direction: 270,
                    boatSpeed: 25,
                    windSpeed: 45
                }),
                new BoatSailingDataItem(
                {
                    direction: 315,
                    boatSpeed: 35,
                    windSpeed: 65
                }),
                new BoatSailingDataItem(
                {
                    direction: 360,
                    boatSpeed: 70,
                    windSpeed: 90
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsCOPY CODE

import { IgcDataChartCoreModule, IgcDataChartPolarModule, IgcDataChartPolarCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartComponent, IgcNumericAngleAxisComponent, IgcNumericRadiusAxisComponent, IgcPolarScatterSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
import { BoatSailingDataItem, BoatSailingData } from './BoatSailingData';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";


ModuleManager.register(
    IgcDataChartCoreModule,
    IgcDataChartPolarModule,
    IgcDataChartPolarCoreModule,
    IgcDataChartInteractivityModule,
    IgcDataChartAnnotationModule
);

export class Sample {

    private chart: IgcDataChartComponent
    private angleAxis: IgcNumericAngleAxisComponent
    private radiusAxis: IgcNumericRadiusAxisComponent
    private polarScatterSeries1: IgcPolarScatterSeriesComponent
    private polarScatterSeries2: IgcPolarScatterSeriesComponent
    private dataToolTipLayer: IgcDataToolTipLayerComponent
    private _bind: () => void;

    constructor() {
        var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;
        var angleAxis = this.angleAxis = document.getElementById('angleAxis') as IgcNumericAngleAxisComponent;
        var radiusAxis = this.radiusAxis = document.getElementById('radiusAxis') as IgcNumericRadiusAxisComponent;
        var polarScatterSeries1 = this.polarScatterSeries1 = document.getElementById('PolarScatterSeries1') as IgcPolarScatterSeriesComponent;
        var polarScatterSeries2 = this.polarScatterSeries2 = document.getElementById('PolarScatterSeries2') as IgcPolarScatterSeriesComponent;
        var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('dataToolTipLayer') as IgcDataToolTipLayerComponent;

        this._bind = () => {
            polarScatterSeries1.dataSource = this.boatSailingData;
            polarScatterSeries1.angleAxis = this.angleAxis;
            polarScatterSeries1.radiusAxis = this.radiusAxis;
            polarScatterSeries2.dataSource = this.boatSailingData;
            polarScatterSeries2.angleAxis = this.angleAxis;
            polarScatterSeries2.radiusAxis = this.radiusAxis;
        }
        this._bind();
    }

    private _boatSailingData: BoatSailingData = null;
    public get boatSailingData(): BoatSailingData {
        if (this._boatSailingData == null)
        {
            this._boatSailingData = new BoatSailingData();
        }
        return this._boatSailingData;
    }

}

new Sample();
tsCOPY CODE

<!DOCTYPE html>
<html>
  <head>
    <title>Sample | Ignite UI | Web Components | infragistics</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
    <link rel="stylesheet" href="/src/index.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">

    <div class="legend-title">
        Wind Speed vs Boat Speed
    </div>

    <div class="container fill">
        <igc-data-chart
        name="chart"
        id="chart"
        is-horizontal-zoom-enabled="false"
        is-vertical-zoom-enabled="false">
            <igc-numeric-angle-axis
            name="angleAxis"
            id="angleAxis"
            start-angle-offset="-90"
            interval="30"
            minimum-value="0"
            maximum-value="360">
            </igc-numeric-angle-axis>
            <igc-numeric-radius-axis
            name="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-series
            name="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-series
            name="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-layer
            name="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) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>htmlCOPY CODE

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

cssCOPY CODE

Edit in: Codesandbox

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:

EXAMPLE

DATA

TS

HTML

CSS

export class BoatSailingDataItem {
    public constructor(init: Partial<BoatSailingDataItem>) {
        Object.assign(this, init);
    }

    public direction: number;
    public boatSpeed: number;
    public windSpeed: number;

}
export class BoatSailingData extends Array<BoatSailingDataItem> {
    public constructor(items: Array<BoatSailingDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new BoatSailingDataItem(
                {
                    direction: 0,
                    boatSpeed: 70,
                    windSpeed: 90
                }),
                new BoatSailingDataItem(
                {
                    direction: 45,
                    boatSpeed: 35,
                    windSpeed: 65
                }),
                new BoatSailingDataItem(
                {
                    direction: 90,
                    boatSpeed: 25,
                    windSpeed: 45
                }),
                new BoatSailingDataItem(
                {
                    direction: 135,
                    boatSpeed: 15,
                    windSpeed: 25
                }),
                new BoatSailingDataItem(
                {
                    direction: 180,
                    boatSpeed: 0,
                    windSpeed: 0
                }),
                new BoatSailingDataItem(
                {
                    direction: 225,
                    boatSpeed: 15,
                    windSpeed: 25
                }),
                new BoatSailingDataItem(
                {
                    direction: 270,
                    boatSpeed: 25,
                    windSpeed: 45
                }),
                new BoatSailingDataItem(
                {
                    direction: 315,
                    boatSpeed: 35,
                    windSpeed: 65
                }),
                new BoatSailingDataItem(
                {
                    direction: 360,
                    boatSpeed: 70,
                    windSpeed: 90
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
tsCOPY CODE

import { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartPolarModule, IgcDataChartPolarCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcNumericAngleAxisComponent, IgcNumericRadiusAxisComponent, IgcPolarLineSeriesComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
import { BoatSailingDataItem, BoatSailingData } from './BoatSailingData';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";


ModuleManager.register(
    IgcLegendModule,
    IgcDataChartCoreModule,
    IgcDataChartPolarModule,
    IgcDataChartPolarCoreModule,
    IgcDataChartInteractivityModule,
    IgcDataChartAnnotationModule
);

export class Sample {

    private legend: IgcLegendComponent
    private chart: IgcDataChartComponent
    private angleAxis: IgcNumericAngleAxisComponent
    private radiusAxis: IgcNumericRadiusAxisComponent
    private polarLineSeries1: IgcPolarLineSeriesComponent
    private polarLineSeries2: IgcPolarLineSeriesComponent
    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 angleAxis = this.angleAxis = document.getElementById('angleAxis') as IgcNumericAngleAxisComponent;
        var radiusAxis = this.radiusAxis = document.getElementById('radiusAxis') as IgcNumericRadiusAxisComponent;
        var polarLineSeries1 = this.polarLineSeries1 = document.getElementById('PolarLineSeries1') as IgcPolarLineSeriesComponent;
        var polarLineSeries2 = this.polarLineSeries2 = document.getElementById('PolarLineSeries2') as IgcPolarLineSeriesComponent;
        var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('dataToolTipLayer') as IgcDataToolTipLayerComponent;

        this._bind = () => {
            chart.legend = this.legend;
            polarLineSeries1.dataSource = this.boatSailingData;
            polarLineSeries1.angleAxis = this.angleAxis;
            polarLineSeries1.radiusAxis = this.radiusAxis;
            polarLineSeries2.dataSource = this.boatSailingData;
            polarLineSeries2.angleAxis = this.angleAxis;
            polarLineSeries2.radiusAxis = this.radiusAxis;
        }
        this._bind();
    }

    private _boatSailingData: BoatSailingData = null;
    public get boatSailingData(): BoatSailingData {
        if (this._boatSailingData == null)
        {
            this._boatSailingData = new BoatSailingData();
        }
        return this._boatSailingData;
    }

}

new Sample();
tsCOPY CODE

<!DOCTYPE html>
<html>
  <head>
    <title>Sample | Ignite UI | Web Components | infragistics</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
    <link rel="stylesheet" href="/src/index.css" type="text/css" />

  </head>

  <body>
    <div id="root">

<div class="container sample">

    <div class="legend-title">
        Wind Speed vs Boat Speed
    </div>

    <div class="legend">
        <igc-legend
        name="legend"
        id="legend"
        orientation="Horizontal">
        </igc-legend>
    </div>

    <div class="container fill">
        <igc-data-chart
        name="chart"
        id="chart"
        is-horizontal-zoom-enabled="false"
        is-vertical-zoom-enabled="false">
            <igc-numeric-angle-axis
            name="angleAxis"
            id="angleAxis"
            start-angle-offset="-90"
            interval="30"
            minimum-value="0"
            maximum-value="360">
            </igc-numeric-angle-axis>
            <igc-numeric-radius-axis
            name="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-series
            name="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-series
            name="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-layer
            name="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) { %><script src="src/index.ts"></script><% } %>
  </body>
</html>htmlCOPY CODE

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */

cssCOPY CODE

Edit in: Codesandbox

Additional Resources

You can find more information about related chart features in these topics:

• Axis Gridlines
• Axis Layouts
• Axis Options