Web Components Polar Chart

The Ignite UI for Web Components Polar Chart uses the polar coordinate system (angle, radius) instead of the Cartesian coordinate system (x, y) to plot data in chart. In other words, Polar Chart takes concepts of Scatter Series and wrap them around a circle rather than stretching data points horizontally. It is often used to plot scientific data (e.g. wind direction and speed, direction, and strength of magnetic field, location of objects in solar system), and can highlight the deviation of collected data from predicted results.

Web Components Polar Area Chart

The Polar Area Chart renders using a collection of polygons connecting data points and it uses the same concepts of data plotting as the Category Area Chart with the difference that the visualization wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the IgcDataChartComponent control by binding your data to a IgcPolarAreaSeriesComponent, as shown in the example below:

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));
        }
    }
}
tsコピー

import { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartPolarModule, IgcDataChartPolarCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcNumericAngleAxisComponent, IgcNumericRadiusAxisComponent, IgcPolarAreaSeriesComponent, 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 polarAreaSeries1: IgcPolarAreaSeriesComponent
    private polarAreaSeries2: IgcPolarAreaSeriesComponent
    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 polarAreaSeries1 = this.polarAreaSeries1 = document.getElementById('PolarAreaSeries1') as IgcPolarAreaSeriesComponent;
        var polarAreaSeries2 = this.polarAreaSeries2 = document.getElementById('PolarAreaSeries2') as IgcPolarAreaSeriesComponent;
        var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('dataToolTipLayer') as IgcDataToolTipLayerComponent;

        this._bind = () => {
            chart.legend = this.legend;
            polarAreaSeries1.dataSource = this.boatSailingData;
            polarAreaSeries1.angleAxis = this.angleAxis;
            polarAreaSeries1.radiusAxis = this.radiusAxis;
            polarAreaSeries2.dataSource = this.boatSailingData;
            polarAreaSeries2.angleAxis = this.angleAxis;
            polarAreaSeries2.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();
tsコピー

<!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-area-series
            name="PolarAreaSeries1"
            id="PolarAreaSeries1"
            angle-member-path="direction"
            radius-member-path="windSpeed"
            show-default-tooltip="false"
            area-fill-opacity="0.8"
            thickness="1"
            title="Wind Speed"
            marker-type="Circle">
            </igc-polar-area-series>
            <igc-polar-area-series
            name="PolarAreaSeries2"
            id="PolarAreaSeries2"
            angle-member-path="direction"
            radius-member-path="boatSpeed"
            show-default-tooltip="false"
            area-fill-opacity="0.8"
            thickness="1"
            title="Boat Speed"
            marker-type="Circle">
            </igc-polar-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>htmlコピー

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

cssコピー

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.

Web Components Polar Spline Area Chart

The Polar Spline Area Chart renders also as a collection of polygons but they have curved splines connecting data points instead of straight lines like Polar Area Chart does. You can create this type of chart in the IgcDataChartComponent control by binding your data to a IgcPolarAreaSeriesComponent, as shown in the example below:

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));
        }
    }
}
tsコピー

import { IgcDataChartCoreModule, IgcDataChartPolarModule, IgcDataChartPolarCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartComponent, IgcNumericAngleAxisComponent, IgcNumericRadiusAxisComponent, IgcPolarSplineAreaSeriesComponent, 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 polarSplineAreaSeries1: IgcPolarSplineAreaSeriesComponent
    private polarSplineAreaSeries2: IgcPolarSplineAreaSeriesComponent
    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 polarSplineAreaSeries1 = this.polarSplineAreaSeries1 = document.getElementById('PolarSplineAreaSeries1') as IgcPolarSplineAreaSeriesComponent;
        var polarSplineAreaSeries2 = this.polarSplineAreaSeries2 = document.getElementById('PolarSplineAreaSeries2') as IgcPolarSplineAreaSeriesComponent;
        var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('dataToolTipLayer') as IgcDataToolTipLayerComponent;

        this._bind = () => {
            polarSplineAreaSeries1.dataSource = this.boatSailingData;
            polarSplineAreaSeries1.angleAxis = this.angleAxis;
            polarSplineAreaSeries1.radiusAxis = this.radiusAxis;
            polarSplineAreaSeries2.dataSource = this.boatSailingData;
            polarSplineAreaSeries2.angleAxis = this.angleAxis;
            polarSplineAreaSeries2.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();
tsコピー

<!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-spline-area-series
            name="PolarSplineAreaSeries1"
            id="PolarSplineAreaSeries1"
            angle-member-path="direction"
            radius-member-path="windSpeed"
            show-default-tooltip="false"
            area-fill-opacity="0.8"
            thickness="1"
            title="Wind Speed"
            marker-type="Circle">
            </igc-polar-spline-area-series>
            <igc-polar-spline-area-series
            name="PolarSplineAreaSeries2"
            id="PolarSplineAreaSeries2"
            angle-member-path="direction"
            radius-member-path="boatSpeed"
            show-default-tooltip="false"
            area-fill-opacity="0.8"
            thickness="1"
            title="Boat Speed"
            marker-type="Circle">
            </igc-polar-spline-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>htmlコピー

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

cssコピー

Edit in: Codesandbox

Web Components Polar Marker Chart

The Polar Marker Chart renders using a collection of markers representing data points in polar (angle/radius) coordinate system. This chart uses the same concepts of data plotting as the Scatter Marker Chart with the difference that the visualization wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the IgcDataChartComponent control by binding your data to a IgcPolarScatterSeriesComponent, as shown in the example below:

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));
        }
    }
}
tsコピー

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();
tsコピー

<!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>htmlコピー

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

cssコピー

Edit in: Codesandbox

Web Components Polar Line Chart

The Polar Line Chart renders using a collection of straight lines connecting data points in polar (angle/radius) coordinate system. This chart uses the same concepts of data plotting as the Scatter Line Chart with the difference that the visualization wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the IgcDataChartComponent control by binding your data to a IgcPolarLineSeriesComponent, as shown in the example below:

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));
        }
    }
}
tsコピー

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();
tsコピー

<!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>htmlコピー

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

cssコピー

Edit in: Codesandbox

Web Components Polar Spline Chart

The Polar Spline Chart renders using a collection of curved splines connecting data points in polar (angle/radius) coordinate system. This Chart uses the same concepts of data plotting as the Scatter Spline Chart with the difference that the visualization wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the IgcDataChartComponent control by binding your data to a IgcPolarSplineSeriesComponent, as shown in the example below:

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));
        }
    }
}
tsコピー

import { IgcDataChartCoreModule, IgcDataChartPolarModule, IgcDataChartPolarCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
import { IgcDataChartComponent, IgcNumericAngleAxisComponent, IgcNumericRadiusAxisComponent, IgcPolarSplineSeriesComponent, 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 polarSplineSeries1: IgcPolarSplineSeriesComponent
    private polarSplineSeries2: IgcPolarSplineSeriesComponent
    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 polarSplineSeries1 = this.polarSplineSeries1 = document.getElementById('PolarSplineSeries1') as IgcPolarSplineSeriesComponent;
        var polarSplineSeries2 = this.polarSplineSeries2 = document.getElementById('PolarSplineSeries2') as IgcPolarSplineSeriesComponent;
        var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('dataToolTipLayer') as IgcDataToolTipLayerComponent;

        this._bind = () => {
            polarSplineSeries1.dataSource = this.boatSailingData;
            polarSplineSeries1.angleAxis = this.angleAxis;
            polarSplineSeries1.radiusAxis = this.radiusAxis;
            polarSplineSeries2.dataSource = this.boatSailingData;
            polarSplineSeries2.angleAxis = this.angleAxis;
            polarSplineSeries2.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();
tsコピー

<!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-spline-series
            name="PolarSplineSeries1"
            id="PolarSplineSeries1"
            angle-member-path="direction"
            radius-member-path="windSpeed"
            show-default-tooltip="false"
            thickness="1"
            title="Wind Speed"
            marker-type="Circle">
            </igc-polar-spline-series>
            <igc-polar-spline-series
            name="PolarSplineSeries2"
            id="PolarSplineSeries2"
            angle-member-path="direction"
            radius-member-path="boatSpeed"
            show-default-tooltip="false"
            thickness="1"
            title="Boat Speed"
            marker-type="Circle">
            </igc-polar-spline-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>htmlコピー

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

cssコピー

Edit in: Codesandbox

Web Components Polar Chart Styling

Once our polar chart is created, we may want to make some further styling customizations such as a change of the line colors, marker types, or outline colors of those markers. You can create this type of chart in the IgcDataChartComponent control by binding your data to a IgcPolarAreaSeriesComponent, as shown in the example below:

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));
        }
    }
}
tsコピー

import { IgcDataChartCoreModule, IgcDataChartPolarModule, IgcDataChartPolarCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule, IgcLegendModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcNumericAngleAxisComponent, IgcNumericRadiusAxisComponent, IgcPolarAreaSeriesComponent } 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,
    IgcLegendModule
);

export class Sample {

    private legend: IgcLegendComponent
    private chart: IgcDataChartComponent
    private angleAxis: IgcNumericAngleAxisComponent
    private radiusAxis: IgcNumericRadiusAxisComponent
    private polarAreaSeries1: IgcPolarAreaSeriesComponent
    private polarAreaSeries2: IgcPolarAreaSeriesComponent
    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 polarAreaSeries1 = this.polarAreaSeries1 = document.getElementById('PolarAreaSeries1') as IgcPolarAreaSeriesComponent;
        var polarAreaSeries2 = this.polarAreaSeries2 = document.getElementById('PolarAreaSeries2') as IgcPolarAreaSeriesComponent;

        this._bind = () => {
            chart.legend = this.legend;
            polarAreaSeries1.dataSource = this.boatSailingData;
            polarAreaSeries1.angleAxis = this.angleAxis;
            polarAreaSeries1.radiusAxis = this.radiusAxis;
            polarAreaSeries2.dataSource = this.boatSailingData;
            polarAreaSeries2.angleAxis = this.angleAxis;
            polarAreaSeries2.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();
tsコピー

<!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"
        marker-brushes="white"
        marker-outlines="rgba(140, 231, 217, 1) rgba(238, 88, 121, 1)"
        brushes="rgba(140, 231, 217, 1) rgba(238, 88, 121, 1)"
        outlines="rgba(140, 231, 217, 1) rgba(238, 88, 121, 1)">
            <igc-numeric-angle-axis
            name="angleAxis"
            id="angleAxis"
            start-angle-offset="-90"
            interval="30"
            minimum-value="0"
            maximum-value="360"
            label-text-style="normal bold 14px Verdana">
            </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-area-series
            name="PolarAreaSeries1"
            id="PolarAreaSeries1"
            angle-member-path="direction"
            radius-member-path="windSpeed"
            show-default-tooltip="true"
            area-fill-opacity="0.3"
            thickness="1"
            title="Wind Speed"
            marker-type="Circle">
            </igc-polar-area-series>
            <igc-polar-area-series
            name="PolarAreaSeries2"
            id="PolarAreaSeries2"
            angle-member-path="direction"
            radius-member-path="boatSpeed"
            show-default-tooltip="true"
            area-fill-opacity="0.3"
            thickness="1"
            title="Boat Speed"
            marker-type="Circle">
            </igc-polar-area-series>
        </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>htmlコピー

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

cssコピー

Edit in: Codesandbox

Additional Resources

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

• Area Chart
• Donut Chart
• Line Chart
• Pie Chart
• Radial Chart
• Scatter Chart
• Spline Chart

API References

The following table lists API members mentioned in the above sections:

• IgcDataChartComponent
• IgcPolarAreaSeriesComponent
• IgcPolarLineSeriesComponent
• IgcPolarSplineSeriesComponent
• IgcPolarSplineAreaSeriesComponent
• IgcPolarScatterSeriesComponent
• ItemsSource
• angleMemberPath
• radiusMemberPath
• IgcNumericAngleAxisComponent
• IgcNumericRadiusAxisComponent