Web Components Radial Chart

The Ignite UI for Web Components Radial Chart takes data and render it as collection of data points wrapped around a circle (rather than stretching along a horizontal line). Radial Chart is also mapping a list of categories from the minimum to the maximum of the extent of the chart, and support the category grouping mechanisms.

Web Components Radial Area Chart

The Web Components Radial Area Chart has a shape of a filled polygon that is bound by a collection of straight lines connecting data points. This chart type uses the same concept of data plotting as the Area Chart, but wraps the data points around a circular axis rather than stretching them horizontally. You can create this type of chart in IgcDataChartComponent control by binding your data to IgcRadialAreaSeriesComponent, as shown in the example below.

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

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();
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">
        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>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 Radial Column Chart

The Radial Column Chart is visualized by using a collection of rectangles that extend from the center of the chart toward the locations of data points. This utilizes the same concepts of data plotting as the Column Chart, but 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 IgcRadialColumnSeriesComponent, as shown in the example below:

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

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


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

export class Sample {

    private legend: IgcLegendComponent
    private chart: IgcDataChartComponent
    private angleAxis: IgcCategoryAngleAxisComponent
    private radiusAxis: IgcNumericRadiusAxisComponent
    private radialColumnSeries1: IgcRadialColumnSeriesComponent
    private radialColumnSeries2: IgcRadialColumnSeriesComponent
    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 radialColumnSeries1 = this.radialColumnSeries1 = document.getElementById('RadialColumnSeries1') as IgcRadialColumnSeriesComponent;
        var radialColumnSeries2 = this.radialColumnSeries2 = document.getElementById('RadialColumnSeries2') as IgcRadialColumnSeriesComponent;
        var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('dataToolTipLayer') as IgcDataToolTipLayerComponent;

        this._bind = () => {
            chart.legend = this.legend;
            angleAxis.dataSource = this.footballPlayerStats;
            radialColumnSeries1.dataSource = this.footballPlayerStats;
            radialColumnSeries1.angleAxis = this.angleAxis;
            radialColumnSeries1.valueAxis = this.radiusAxis;
            radialColumnSeries2.dataSource = this.footballPlayerStats;
            radialColumnSeries2.angleAxis = this.angleAxis;
            radialColumnSeries2.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();
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">
        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-column-series
            name="RadialColumnSeries1"
            id="RadialColumnSeries1"
            value-member-path="ronaldo"
            show-default-tooltip="false"
            area-fill-opacity="0.8"
            thickness="3"
            title="Ronaldo">
            </igc-radial-column-series>
            <igc-radial-column-series
            name="RadialColumnSeries2"
            id="RadialColumnSeries2"
            value-member-path="messi"
            show-default-tooltip="false"
            area-fill-opacity="0.8"
            thickness="3"
            title="Messi">
            </igc-radial-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>htmlコピー

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

cssコピー

Edit in: Codesandbox

Web Components Radial Line Chart

The Web Components Radial Line Chart has renders as a collection of straight lines connecting data points. This chart type uses the same concept of data plotting as the Line Chart, but wraps the data points around a circular axis rather than stretching them horizontally. You can create this type of chart in the IgcDataChartComponent control by binding your data to IgcRadialLineSeriesComponent, as shown in the example below:

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

import { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartRadialModule, IgcDataChartRadialCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryAngleAxisComponent, IgcNumericRadiusAxisComponent, IgcRadialLineSeriesComponent, 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 radialLineSeries1: IgcRadialLineSeriesComponent
    private radialLineSeries2: IgcRadialLineSeriesComponent
    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 radialLineSeries1 = this.radialLineSeries1 = document.getElementById('RadialLineSeries1') as IgcRadialLineSeriesComponent;
        var radialLineSeries2 = this.radialLineSeries2 = document.getElementById('RadialLineSeries2') as IgcRadialLineSeriesComponent;
        var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('dataToolTipLayer') as IgcDataToolTipLayerComponent;

        this._bind = () => {
            chart.legend = this.legend;
            angleAxis.dataSource = this.footballPlayerStats;
            radialLineSeries1.dataSource = this.footballPlayerStats;
            radialLineSeries1.angleAxis = this.angleAxis;
            radialLineSeries1.valueAxis = this.radiusAxis;
            radialLineSeries2.dataSource = this.footballPlayerStats;
            radialLineSeries2.angleAxis = this.angleAxis;
            radialLineSeries2.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();
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">
        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-line-series
            name="RadialLineSeries1"
            id="RadialLineSeries1"
            value-member-path="ronaldo"
            show-default-tooltip="false"
            area-fill-opacity="0.8"
            thickness="3"
            title="Ronaldo"
            marker-type="Circle">
            </igc-radial-line-series>
            <igc-radial-line-series
            name="RadialLineSeries2"
            id="RadialLineSeries2"
            value-member-path="messi"
            show-default-tooltip="false"
            area-fill-opacity="0.8"
            thickness="3"
            title="Messi"
            marker-type="Circle">
            </igc-radial-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 Radial Pie Chart

The Radial Pie Chart uses pie slices that extend from the center of chart towards locations of data points. This chart type takes concepts of categorizing multiple series of data points and wraps them around a circular axis rather than stretching data points along a horizontal line. You can create this type of chart in the IgcDataChartComponent control by binding your data to a IgcRadialPieSeriesComponent, as shown in the example below:

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

import { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartRadialModule, IgcDataChartRadialCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryAngleAxisComponent, IgcNumericRadiusAxisComponent, IgcRadialPieSeriesComponent, 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 radialPieSeries1: IgcRadialPieSeriesComponent
    private radialPieSeries2: IgcRadialPieSeriesComponent
    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 radialPieSeries1 = this.radialPieSeries1 = document.getElementById('RadialPieSeries1') as IgcRadialPieSeriesComponent;
        var radialPieSeries2 = this.radialPieSeries2 = document.getElementById('RadialPieSeries2') as IgcRadialPieSeriesComponent;
        var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('dataToolTipLayer') as IgcDataToolTipLayerComponent;

        this._bind = () => {
            chart.legend = this.legend;
            angleAxis.dataSource = this.footballPlayerStats;
            radialPieSeries1.dataSource = this.footballPlayerStats;
            radialPieSeries1.angleAxis = this.angleAxis;
            radialPieSeries1.valueAxis = this.radiusAxis;
            radialPieSeries2.dataSource = this.footballPlayerStats;
            radialPieSeries2.angleAxis = this.angleAxis;
            radialPieSeries2.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();
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">
        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-pie-series
            name="RadialPieSeries1"
            id="RadialPieSeries1"
            value-member-path="ronaldo"
            show-default-tooltip="false"
            area-fill-opacity="0.8"
            thickness="3"
            title="Ronaldo">
            </igc-radial-pie-series>
            <igc-radial-pie-series
            name="RadialPieSeries2"
            id="RadialPieSeries2"
            value-member-path="messi"
            show-default-tooltip="false"
            area-fill-opacity="0.8"
            thickness="3"
            title="Messi">
            </igc-radial-pie-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 Radial Chart Styling

Once our radial 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. This example demonstrates how to customize styling in IgcDataChartComponent control.

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

import { IgcLegendModule, IgcDataChartCoreModule, IgcDataChartRadialModule, IgcDataChartRadialCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
import { IgcLegendComponent, IgcDataChartComponent, IgcCategoryAngleAxisComponent, IgcNumericRadiusAxisComponent, IgcRadialAreaSeriesComponent } 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 _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;

        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();
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">
        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"
        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-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="true"
            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="true"
            area-fill-opacity="0.5"
            thickness="3"
            title="Messi"
            marker-type="Circle">
            </igc-radial-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

Web Components Radial Chart Settings

In addition, the labels can be configured to appear near or wide from the chart. This can be configured with the LabelMode property for the IgcCategoryAngleAxisComponent.

Additional Resources

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

• Area Chart
• Column Chart
• Donut Chart
• Line Chart
• Pie Chart

API References

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

• IgcDataChartComponent
• IgcRadialAreaSeriesComponent
• IgcRadialColumnSeriesComponent
• IgcRadialLineSeriesComponent
• IgcRadialPieSeriesComponent
• ItemsSource
• AngleAxisName
• ValueAxisName
• valueMemberPath
• IgcCategoryAngleAxisComponent
• IgcNumericRadiusAxisComponent