Web Components Data Pie Chart

The Ignite UI for Web Components Data Pie Chart is a part-to-whole chart that shows how categories (parts) of a data set add up to a total (whole) value. Categories are rendered as sections in a circular, or pie-shaped graph. Each section, or pie slice, has an arc length proportional to its underlying data value. Categories are shown in proportion to other categories based on their value percentage to the total value being analyzed, as parts of 100 or 100%.

Web Components Data Pie Chart Example

You can create the Web Components Pie Chart in the IgcDataPieChartComponent by binding your data items with a string and a numeric data value. These data values will add up to a value of 100% of visualization.

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

    public value: number;
    public category: string;
    public summary: string;

}
export class EnergyGlobalDemand extends Array<EnergyGlobalDemandItem> {
    public constructor(items: Array<EnergyGlobalDemandItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new EnergyGlobalDemandItem(
                {
                    value: 37,
                    category: `Cooling`,
                    summary: `Cooling 37%`
                }),
                new EnergyGlobalDemandItem(
                {
                    value: 25,
                    category: `Residential`,
                    summary: `Residential 25%`
                }),
                new EnergyGlobalDemandItem(
                {
                    value: 12,
                    category: `Heating`,
                    summary: `Heating 12%`
                }),
                new EnergyGlobalDemandItem(
                {
                    value: 11,
                    category: `Lighting`,
                    summary: `Lighting 11%`
                }),
                new EnergyGlobalDemandItem(
                {
                    value: 15,
                    category: `Other`,
                    summary: `Other 15%`
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
ts

import { IgcDataPieChartModule, IgcItemLegendModule } from 'igniteui-webcomponents-charts';
import { IgcDataPieChartComponent } from 'igniteui-webcomponents-charts';
import { EnergyGlobalDemandItem, EnergyGlobalDemand } from './EnergyGlobalDemand';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";


ModuleManager.register(
    IgcDataPieChartModule,
    IgcItemLegendModule
);

export class Sample {

    private chart: IgcDataPieChartComponent
    private _bind: () => void;

    constructor() {
        var chart = this.chart = document.getElementById('chart') as IgcDataPieChartComponent;

        this._bind = () => {
            chart.dataSource = this.energyGlobalDemand;
        }
        this._bind();
    }

    private _energyGlobalDemand: EnergyGlobalDemand = null;
    public get energyGlobalDemand(): EnergyGlobalDemand {
        if (this._energyGlobalDemand == null)
        {
            this._energyGlobalDemand = new EnergyGlobalDemand();
        }
        return this._energyGlobalDemand;
    }

}

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">
        Global Electricity Demand by Energy Use
    </div>

    <div class="container fill">
        <igc-data-pie-chart
        name="chart"
        id="chart">
        </igc-data-pie-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

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 Data Pie Chart Recommendations

Pie Charts are appropriate for small data sets and are easy to read at a glance. Pie charts are just one type of part-to-whole visualization such as Doughnut (Ring) Chart, Funnel Chart, Stacked Area Chart, Stacked Bar Chart, and Treemap.

The Web Components Data Pie Chart includes interactive features that give the viewer tools to analyze data, like:

Legends
Slice Selection
Slice Highlighting
Chart Animations

Best Practices for a Pie Chart:

Comparing slices or segments as percentage values in proportion to a total value or whole.
Showing how a group of categories is broken into smaller segments.
Presenting small, non-hierarchical data sets (less than 6 to 8 segments of data).
Ensuring data segments add up to 100%.
Arranging the order of data from largest (highest) to smallest (least).
Using standard presentation techniques such as starting in the 12 o'clock position and continuing clockwise.
Ensuring the color palette is distinguishable for segments/slices of the parts.
Considering data labels in segments vs. legends for ease of reading.
Choosing an alternative chart to Pie such as Bar or Ring based on ease of comprehension.
Avoiding positioning multiple pie charts next to each other for comparative analysis.

Do Not Use Pie Chart When:

Comparing change over time —use a Bar, Line or Area chart.
Requiring precise data comparison —use a Bar, Line or Area chart.
You have more than 6 or 8 segments (high data volume) — consider a Bar, Line or Area chart if it works for your data story.
It would be easier for the viewer to perceive the value difference in a Bar chart.

Web Components Data Pie Chart Legend

Legends are used to show information about each point, to know about its contribution towards the total sum.

In order to display a legend next to the pie chart an ItemLegend needs to be created and assigned to the IgcLegendComponent property. The ItemLegend will display its items in vertical orientation as a default, but this can be changed by setting its orientation property.

The labels shown on the legend will display the same content as the label that is shown for each slice in the IgcDataPieChartComponent by default, but this can be modified by utilizing the legendSliceLabelContentMode property on the chart. This exposes an enumeration that allows you to show the label, value, percentage, or any combination of those as the legend's content for each slice in the chart.

You can also modify the ItemLegend badge. By default, it appears as a filled circle corresponding to the color of the associated chart slice. You can configure this by using the legendItemBadgeShape property on the chart, and you can set this to be a circle, line, bar, column, and more.

Below is an example that demonstrates usage of the ItemLegend with the IgcDataPieChartComponent.

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

    public value: number;
    public category: string;
    public summary: string;

}
export class EnergyGlobalDemand extends Array<EnergyGlobalDemandItem> {
    public constructor(items: Array<EnergyGlobalDemandItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new EnergyGlobalDemandItem(
                {
                    value: 37,
                    category: `Cooling`,
                    summary: `Cooling 37%`
                }),
                new EnergyGlobalDemandItem(
                {
                    value: 25,
                    category: `Residential`,
                    summary: `Residential 25%`
                }),
                new EnergyGlobalDemandItem(
                {
                    value: 12,
                    category: `Heating`,
                    summary: `Heating 12%`
                }),
                new EnergyGlobalDemandItem(
                {
                    value: 11,
                    category: `Lighting`,
                    summary: `Lighting 11%`
                }),
                new EnergyGlobalDemandItem(
                {
                    value: 15,
                    category: `Other`,
                    summary: `Other 15%`
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
ts

import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import { IgcDataPieChartModule, IgcItemLegendModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, DataPieChartDescriptionModule, ItemLegendDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcItemLegendComponent, IgcDataPieChartComponent } from 'igniteui-webcomponents-charts';
import { EnergyGlobalDemandItem, EnergyGlobalDemand } from './EnergyGlobalDemand';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";


ModuleManager.register(
    IgcPropertyEditorPanelModule,
    IgcDataPieChartModule,
    IgcItemLegendModule
);

export class Sample {

    private legend: IgcItemLegendComponent
    private chart: IgcDataPieChartComponent
    private _bind: () => void;

    constructor() {
        var legend = this.legend = document.getElementById('legend') as IgcItemLegendComponent;
        var chart = this.chart = document.getElementById('chart') as IgcDataPieChartComponent;

        this._bind = () => {
            chart.dataSource = this.energyGlobalDemand;
            chart.legend = this.legend;
        }
        this._bind();
    }

    private _energyGlobalDemand: EnergyGlobalDemand = null;
    public get energyGlobalDemand(): EnergyGlobalDemand {
        if (this._energyGlobalDemand == null)
        {
            this._energyGlobalDemand = new EnergyGlobalDemand();
        }
        return this._energyGlobalDemand;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            PropertyEditorPanelDescriptionModule.register(context);
            DataPieChartDescriptionModule.register(context);
            ItemLegendDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

}

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">
        Global Electricity Demand by Energy Use
    </div>

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

    <div class="container fill">
        <igc-data-pie-chart
        name="chart"
        id="chart">
        </igc-data-pie-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

Web Components Pie Chart Others Category

Sometimes, the underlying data for the pie chart will contain many items with small values. In this case, the Others category will permit automatic aggregation of several data values into a single slice.

The Others category in the IgcDataPieChartComponent has three main, configurable properties - othersCategoryType, othersCategoryThreshold, and othersCategoryText that allow you to configure how the Others slice in the chart is shown. These are each described below:

The othersCategoryType property works in tandem with the othersCategoryThreshold property of the IgcDataPieChartComponent. For the othersCategoryType, you can define whether you want the othersCategoryThreshold to be evaluated as a number or a percentage. For example, if you decide on number and set the othersCategoryThreshold to 5, any slices that have a value less than 5 will become part of the Others category. Using the same value of 5 with a percent type, any values that are less than 5 percent of the total values of the IgcDataPieChartComponent will become part of the Others category.

By default, the Others slice will be represented by a label of "Others." You can change this by modifying the othersCategoryText property of the chart.

If you want to ensure that the Others category does not show up in the IgcDataPieChartComponent, you can set the othersCategoryThreshold to 0.

The following sample demonstrates usage of the Others slice in the IgcDataPieChartComponent:

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

    public v1: number;
    public category: string;

}
export class DataPieData extends Array<DataPieDataItem> {
    public constructor(items: Array<DataPieDataItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new DataPieDataItem(
                {
                    v1: 100,
                    category: `Maintenance`
                }),
                new DataPieDataItem(
                {
                    v1: 40,
                    category: `Cooling`
                }),
                new DataPieDataItem(
                {
                    v1: 20,
                    category: `Residential`
                }),
                new DataPieDataItem(
                {
                    v1: 15,
                    category: `Utilities`
                }),
                new DataPieDataItem(
                {
                    v1: 10,
                    category: `Heating`
                }),
                new DataPieDataItem(
                {
                    v1: 5,
                    category: `Lighting`
                }),
                new DataPieDataItem(
                {
                    v1: 4,
                    category: `Electric`
                }),
                new DataPieDataItem(
                {
                    v1: 3,
                    category: `Misc`
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
ts

import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import { IgcDataPieChartModule, IgcItemLegendModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, DataPieChartDescriptionModule, ItemLegendDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcDataPieChartComponent } from 'igniteui-webcomponents-charts';
import { DataPieDataItem, DataPieData } from './DataPieData';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
import { ModuleManager } from 'igniteui-webcomponents-core';

defineAllComponents();

import "./index.css";

ModuleManager.register(
    IgcPropertyEditorPanelModule,
    IgcDataPieChartModule,
    IgcItemLegendModule
);

export class Sample {

    private propertyEditorPanel1: IgcPropertyEditorPanelComponent
    private othersCategoryTypeEditor: IgcPropertyEditorPropertyDescriptionComponent
    private othersCategoryThresholdEditor: IgcPropertyEditorPropertyDescriptionComponent
    private othersCategoryTextEditor: IgcPropertyEditorPropertyDescriptionComponent
    private chart: IgcDataPieChartComponent
    private _bind: () => void;

    constructor() {
        var propertyEditorPanel1 = this.propertyEditorPanel1 = document.getElementById('propertyEditorPanel1') as IgcPropertyEditorPanelComponent;
        var othersCategoryTypeEditor = this.othersCategoryTypeEditor = document.getElementById('OthersCategoryTypeEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        var othersCategoryThresholdEditor = this.othersCategoryThresholdEditor = document.getElementById('OthersCategoryThresholdEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        var othersCategoryTextEditor = this.othersCategoryTextEditor = document.getElementById('OthersCategoryTextEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        var chart = this.chart = document.getElementById('chart') as IgcDataPieChartComponent;

        this._bind = () => {
            propertyEditorPanel1.componentRenderer = this.renderer;
            propertyEditorPanel1.target = this.chart;
            chart.dataSource = this.dataPieData;
        }
        this._bind();
    }

    private _dataPieData: DataPieData = null;
    public get dataPieData(): DataPieData {
        if (this._dataPieData == null)
        {
            this._dataPieData = new DataPieData();
        }
        return this._dataPieData;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            PropertyEditorPanelDescriptionModule.register(context);
            DataPieChartDescriptionModule.register(context);
            ItemLegendDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

}

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="options vertical">
        <igc-property-editor-panel

        description-type="DataPieChart"
        is-horizontal="true"
        is-wrapping-enabled="true"
        name="propertyEditorPanel1"
        id="propertyEditorPanel1">
            <igc-property-editor-property-description
            property-path="OthersCategoryType"
            name="OthersCategoryTypeEditor"
            id="OthersCategoryTypeEditor"
            label="Others Type: "
            primitive-value="Number"
            value-type="EnumValue">
            </igc-property-editor-property-description>
            <igc-property-editor-property-description
            property-path="OthersCategoryThreshold"
            name="OthersCategoryThresholdEditor"
            id="OthersCategoryThresholdEditor"
            label="Others Threshold: "
            value-type="Slider"
            min="0"
            max="50"
            primitive-value="15">
            </igc-property-editor-property-description>
            <igc-property-editor-property-description
            property-path="OthersCategoryText"
            name="OthersCategoryTextEditor"
            id="OthersCategoryTextEditor"
            label="Others Text: "
            value-type="StringValue">
            </igc-property-editor-property-description>
        </igc-property-editor-panel>
    </div>

    <div class="legend-title">
        Global Electricity Demand by Energy Use
    </div>

    <div class="container fill">
        <igc-data-pie-chart
        name="chart"
        id="chart"
        others-category-type="Number"
        others-category-threshold="15">
        </igc-data-pie-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

Web Components Data Pie Chart Selection

The IgcDataPieChartComponent supports slice selection by mouse click on the slices plotted in the chart. This can be configured by utilizing the selectionBehavior and selectionMode properties of the chart, described below:

The main two options of the selectionBehavior are PerDataItemSingleSelect and PerDataItemMultiSelect, which will enable single and multiple selection, respectively.

The selectionMode property exposes an enumeration that determines how the pie chart slices respond to being selected. The following are the options of that enumeration and what they do:

Brighten: The selected slices will be highlighted.
FadeOthers: The selected slices will remain their same color and others will fade.
FocusColorFill: The selected slices will change their background to the FocusBrush of the chart.
FocusColorOutline: The selected slices will have an outline with the color defined by the FocusBrush of the chart.
FocusColorThickOutline: The selected slices will have an outline with the color defined by the FocusBrush of the chart. The thickness of this outline can be configured via the Thickness property of the control as well.
GrayscaleOthers: The unselected slices will have a gray color filter applied to them.
None: There is no effect on the selected slices.
SelectionColorFill: The selected slices will change their background to the SelectionBrush of the chart.
SelectionColorOutline: The selected slices will have an outline with the color defined by the SelectionBrush of the chart.
SelectionColorThickOutline: The selected slices will have an outline with the color defined by the FocusBrush of the chart. The thickness of this outline can be configured via the Thickness property of the control as well.
ThickOutline: The selected slices will apply an outline with the thickness dependent on the Thickness property of the chart.

When a slice is selected, its underlying data item will be added to the SelectedSeriesItems collection of the chart. As such, the XamDataPieChart exposes the SelectedSeriesItemsChanged event to detect when a slice has been selected and this collection is changed.

The following sample demonstrates the selection feature of the IgcDataPieChartComponent control:

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

    public value: number;
    public category: string;
    public summary: string;

}
export class EnergyGlobalDemand extends Array<EnergyGlobalDemandItem> {
    public constructor(items: Array<EnergyGlobalDemandItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new EnergyGlobalDemandItem(
                {
                    value: 37,
                    category: `Cooling`,
                    summary: `Cooling 37%`
                }),
                new EnergyGlobalDemandItem(
                {
                    value: 25,
                    category: `Residential`,
                    summary: `Residential 25%`
                }),
                new EnergyGlobalDemandItem(
                {
                    value: 12,
                    category: `Heating`,
                    summary: `Heating 12%`
                }),
                new EnergyGlobalDemandItem(
                {
                    value: 11,
                    category: `Lighting`,
                    summary: `Lighting 11%`
                }),
                new EnergyGlobalDemandItem(
                {
                    value: 15,
                    category: `Other`,
                    summary: `Other 15%`
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
ts

import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import { IgcDataPieChartModule, IgcItemLegendModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, DataPieChartDescriptionModule, ItemLegendDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcDataPieChartComponent } from 'igniteui-webcomponents-charts';
import { EnergyGlobalDemandItem, EnergyGlobalDemand } from './EnergyGlobalDemand';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
import { ModuleManager } from 'igniteui-webcomponents-core';

defineAllComponents();

import "./index.css";

ModuleManager.register(
    IgcPropertyEditorPanelModule,
    IgcDataPieChartModule,
    IgcItemLegendModule
);

export class Sample {

    private propertyEditorPanel1: IgcPropertyEditorPanelComponent
    private selectionBehaviorEditor: IgcPropertyEditorPropertyDescriptionComponent
    private selectionModeEditor: IgcPropertyEditorPropertyDescriptionComponent
    private chart: IgcDataPieChartComponent
    private _bind: () => void;

    constructor() {
        var propertyEditorPanel1 = this.propertyEditorPanel1 = document.getElementById('propertyEditorPanel1') as IgcPropertyEditorPanelComponent;
        var selectionBehaviorEditor = this.selectionBehaviorEditor = document.getElementById('SelectionBehaviorEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        var selectionModeEditor = this.selectionModeEditor = document.getElementById('SelectionModeEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        var chart = this.chart = document.getElementById('chart') as IgcDataPieChartComponent;

        this._bind = () => {
            propertyEditorPanel1.componentRenderer = this.renderer;
            propertyEditorPanel1.target = this.chart;
            chart.dataSource = this.energyGlobalDemand;
        }
        this._bind();
    }

    private _energyGlobalDemand: EnergyGlobalDemand = null;
    public get energyGlobalDemand(): EnergyGlobalDemand {
        if (this._energyGlobalDemand == null)
        {
            this._energyGlobalDemand = new EnergyGlobalDemand();
        }
        return this._energyGlobalDemand;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            PropertyEditorPanelDescriptionModule.register(context);
            DataPieChartDescriptionModule.register(context);
            ItemLegendDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

}

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="options vertical">
        <igc-property-editor-panel

        description-type="DataPieChart"
        is-horizontal="true"
        is-wrapping-enabled="true"
        name="propertyEditorPanel1"
        id="propertyEditorPanel1">
            <igc-property-editor-property-description
            label="Selection Behavior: "
            value-type="EnumValue"
            property-path="SelectionBehavior"
            name="SelectionBehaviorEditor"
            id="SelectionBehaviorEditor"
            should-override-default-editor="true"
            drop-down-names="PerDataItemSingleSelect, PerDataItemMultiSelect"
            drop-down-values="PerDataItemSingleSelect, PerDataItemMultiSelect"
            primitive-value="PerDataItemSingleSelect">
            </igc-property-editor-property-description>
            <igc-property-editor-property-description
            property-path="SelectionMode"
            name="SelectionModeEditor"
            id="SelectionModeEditor"
            label="Selection Mode: "
            primitive-value="Brighten">
            </igc-property-editor-property-description>
        </igc-property-editor-panel>
    </div>

    <div class="legend-title">
        Global Electricity Demand by Energy Use
    </div>

    <div class="container fill">
        <igc-data-pie-chart
        name="chart"
        id="chart"
        highlighting-mode="None"
        selection-mode="Brighten"
        selection-behavior="PerDataItemSingleSelect"
        selection-brush="dodgerblue"
        focus-brush="black"
        thickness="3">
        </igc-data-pie-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

Web Components Data Pie Chart Highlighting

The IgcDataPieChartComponent supports mouse over highlighting, as well as a highlighting overlay that can be configured by providing a separate data source.

First, the highlightingBehavior enumerated property determines how a slice will be highlighted. The following are the options of that property and what they do:

DirectlyOver: The slices are only highlighted when the mouse is directly over them.
NearestItems: The nearest slice to the mouse position will be highlighted.
NearestItemsAndSeries: The nearest slice and series to the mouse position will be highlighted.
NearestItemsRetainMainShapes: The nearest items to the mouse position will be highlighted and the main shapes of the series will not be de-emphasized.

The highlightingMode enumerated property determines how the data pie chart slices respond to being highlighted. The following are the options of that property and what they do:

Brighten: The series will have its color brightened when the mouse position is over or near it.
BrightenSpecific: The specific slice will have its color brightened when the mouse position is over or near it.
FadeOthers: The series will retain its color when the mouse position is over or near it, while the others will appear faded.
FadeOthersSpecific: The specific slice will retain its color when the mouse position is over or near it, while the others will appear faded.
None: The series and slices will not be highlighted.

The following example demonstrates the mouse highlighting behaviors of the IgcDataPieChartComponent component:

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

    public value: number;
    public category: string;
    public summary: string;

}
export class EnergyGlobalDemand extends Array<EnergyGlobalDemandItem> {
    public constructor(items: Array<EnergyGlobalDemandItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new EnergyGlobalDemandItem(
                {
                    value: 37,
                    category: `Cooling`,
                    summary: `Cooling 37%`
                }),
                new EnergyGlobalDemandItem(
                {
                    value: 25,
                    category: `Residential`,
                    summary: `Residential 25%`
                }),
                new EnergyGlobalDemandItem(
                {
                    value: 12,
                    category: `Heating`,
                    summary: `Heating 12%`
                }),
                new EnergyGlobalDemandItem(
                {
                    value: 11,
                    category: `Lighting`,
                    summary: `Lighting 11%`
                }),
                new EnergyGlobalDemandItem(
                {
                    value: 15,
                    category: `Other`,
                    summary: `Other 15%`
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
ts

import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import { IgcDataPieChartModule, IgcItemLegendModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, DataPieChartDescriptionModule, ItemLegendDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcDataPieChartComponent } from 'igniteui-webcomponents-charts';
import { EnergyGlobalDemandItem, EnergyGlobalDemand } from './EnergyGlobalDemand';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
import { ModuleManager } from 'igniteui-webcomponents-core';

defineAllComponents();

import "./index.css";

ModuleManager.register(
    IgcPropertyEditorPanelModule,
    IgcDataPieChartModule,
    IgcItemLegendModule
);

export class Sample {

    private propertyEditorPanel1: IgcPropertyEditorPanelComponent
    private highlightingModeEditor: IgcPropertyEditorPropertyDescriptionComponent
    private highlightingBehaviorEditor: IgcPropertyEditorPropertyDescriptionComponent
    private chart: IgcDataPieChartComponent
    private _bind: () => void;

    constructor() {
        var propertyEditorPanel1 = this.propertyEditorPanel1 = document.getElementById('propertyEditorPanel1') as IgcPropertyEditorPanelComponent;
        var highlightingModeEditor = this.highlightingModeEditor = document.getElementById('HighlightingModeEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        var highlightingBehaviorEditor = this.highlightingBehaviorEditor = document.getElementById('HighlightingBehaviorEditor') as IgcPropertyEditorPropertyDescriptionComponent;
        var chart = this.chart = document.getElementById('chart') as IgcDataPieChartComponent;

        this._bind = () => {
            propertyEditorPanel1.componentRenderer = this.renderer;
            propertyEditorPanel1.target = this.chart;
            chart.dataSource = this.energyGlobalDemand;
        }
        this._bind();
    }

    private _energyGlobalDemand: EnergyGlobalDemand = null;
    public get energyGlobalDemand(): EnergyGlobalDemand {
        if (this._energyGlobalDemand == null)
        {
            this._energyGlobalDemand = new EnergyGlobalDemand();
        }
        return this._energyGlobalDemand;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            PropertyEditorPanelDescriptionModule.register(context);
            DataPieChartDescriptionModule.register(context);
            ItemLegendDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

}

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="options vertical">
        <igc-property-editor-panel

        description-type="DataPieChart"
        is-horizontal="true"
        is-wrapping-enabled="true"
        name="propertyEditorPanel1"
        id="propertyEditorPanel1">
            <igc-property-editor-property-description
            property-path="HighlightingMode"
            name="HighlightingModeEditor"
            id="HighlightingModeEditor"
            label="Highlighting Mode: "
            primitive-value="BrightenSpecific">
            </igc-property-editor-property-description>
            <igc-property-editor-property-description
            property-path="HighlightingBehavior"
            name="HighlightingBehaviorEditor"
            id="HighlightingBehaviorEditor"
            label="Highlighting Behavior: "
            primitive-value="DirectlyOver">
            </igc-property-editor-property-description>
        </igc-property-editor-panel>
    </div>

    <div class="legend-title">
        Global Electricity Demand by Energy Use
    </div>

    <div class="container fill">
        <igc-data-pie-chart
        name="chart"
        id="chart"
        highlighting-behavior="DirectlyOver"
        highlighting-mode="BrightenSpecific">
        </igc-data-pie-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

In addition to the mouse highlighting, the IgcDataPieChartComponent exposes a highlight filter capability that can display a subset of your data. This is applied by specifying a HighlightedDataSource for the control and by setting the highlightedValuesDisplayMode property to Overlay. The HighlightedDataSource expects a subset of the data assigned to the DataSource property of the IgcDataPieChartComponent.

When these conditions are met, the values of the subset will be highlighted, while the remainder of the full set of data will be faded - effectively creating a highlight for the subset and allowing easier visualization of a subset of your data within the same control.

The following example demonstrates highlight filtering.

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

    public category: string;
    public value: number;

}
export class OnlineTrafficHighlightDesktopOnly extends Array<OnlineTrafficHighlightDesktopOnlyItem> {
    public constructor(items: Array<OnlineTrafficHighlightDesktopOnlyItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new OnlineTrafficHighlightDesktopOnlyItem(
                {
                    category: `Apparel`,
                    value: 27
                }),
                new OnlineTrafficHighlightDesktopOnlyItem(
                {
                    category: `Beauty`,
                    value: 29
                }),
                new OnlineTrafficHighlightDesktopOnlyItem(
                {
                    category: `Travel`,
                    value: 41
                }),
                new OnlineTrafficHighlightDesktopOnlyItem(
                {
                    category: `Grocery`,
                    value: 37
                }),
                new OnlineTrafficHighlightDesktopOnlyItem(
                {
                    category: `Energy`,
                    value: 58
                }),
                new OnlineTrafficHighlightDesktopOnlyItem(
                {
                    category: `Home Supply`,
                    value: 35
                }),
                new OnlineTrafficHighlightDesktopOnlyItem(
                {
                    category: `Financial`,
                    value: 58
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
ts

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

    public category: string;
    public value: number;

}
export class OnlineTrafficHighlightTotals extends Array<OnlineTrafficHighlightTotalsItem> {
    public constructor(items: Array<OnlineTrafficHighlightTotalsItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new OnlineTrafficHighlightTotalsItem(
                {
                    category: `Apparel`,
                    value: 56
                }),
                new OnlineTrafficHighlightTotalsItem(
                {
                    category: `Beauty`,
                    value: 67
                }),
                new OnlineTrafficHighlightTotalsItem(
                {
                    category: `Travel`,
                    value: 80
                }),
                new OnlineTrafficHighlightTotalsItem(
                {
                    category: `Grocery`,
                    value: 62
                }),
                new OnlineTrafficHighlightTotalsItem(
                {
                    category: `Energy`,
                    value: 74
                }),
                new OnlineTrafficHighlightTotalsItem(
                {
                    category: `Home Supply`,
                    value: 65
                }),
                new OnlineTrafficHighlightTotalsItem(
                {
                    category: `Financial`,
                    value: 88
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
ts

import { IgcDataPieChartModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, DataPieChartDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcDataPieChartComponent } from 'igniteui-webcomponents-charts';
import { OnlineTrafficHighlightTotalsItem, OnlineTrafficHighlightTotals } from './OnlineTrafficHighlightTotals';
import { OnlineTrafficHighlightDesktopOnlyItem, OnlineTrafficHighlightDesktopOnly } from './OnlineTrafficHighlightDesktopOnly';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";


ModuleManager.register(
    IgcDataPieChartModule
);

export class Sample {

    private chart: IgcDataPieChartComponent
    private _bind: () => void;

    constructor() {
        var chart = this.chart = document.getElementById('chart') as IgcDataPieChartComponent;

        this._bind = () => {
            chart.dataSource = this.onlineTrafficHighlightTotals;
            chart.highlightedDataSource = this.onlineTrafficHighlightDesktopOnly;
        }
        this._bind();
    }

    private _onlineTrafficHighlightTotals: OnlineTrafficHighlightTotals = null;
    public get onlineTrafficHighlightTotals(): OnlineTrafficHighlightTotals {
        if (this._onlineTrafficHighlightTotals == null)
        {
            this._onlineTrafficHighlightTotals = new OnlineTrafficHighlightTotals();
        }
        return this._onlineTrafficHighlightTotals;
    }

    private _onlineTrafficHighlightDesktopOnly: OnlineTrafficHighlightDesktopOnly = null;
    public get onlineTrafficHighlightDesktopOnly(): OnlineTrafficHighlightDesktopOnly {
        if (this._onlineTrafficHighlightDesktopOnly == null)
        {
            this._onlineTrafficHighlightDesktopOnly = new OnlineTrafficHighlightDesktopOnly();
        }
        return this._onlineTrafficHighlightDesktopOnly;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            DataPieChartDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

}

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="container fill">
        <igc-data-pie-chart
        name="chart"
        id="chart"
        highlighted-values-display-mode="Overlay">
        </igc-data-pie-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

Web Components Data Pie Chart Animation

The IgcDataPieChartComponent supports animating its slices into view, as well as when a value changes.

You can set the isTransitionInEnabled property to true to have the pie chart animate into view. The type of animation performed can be configured by setting the transitionInMode enumerated property to the type of animation you would like to see. Additionally, you can also set the transitionInSpeedType property to scale with index, value, normal, or randomized. The duration of this animation can be controlled by the transitionInDuration property, which takes a TimeSpan.

If you would like to animate data changes, this can also be done by setting the animateSeriesWhenAxisRangeChanges property to true. The duration of this change can be configured by setting the transitionDuration property as well.

The following sample demonstrates the usage of animation in the IgcDataPieChartComponent:

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

    public value: number;
    public category: string;
    public summary: string;

}
export class EnergyGlobalDemand extends Array<EnergyGlobalDemandItem> {
    public constructor(items: Array<EnergyGlobalDemandItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new EnergyGlobalDemandItem(
                {
                    value: 37,
                    category: `Cooling`,
                    summary: `Cooling 37%`
                }),
                new EnergyGlobalDemandItem(
                {
                    value: 25,
                    category: `Residential`,
                    summary: `Residential 25%`
                }),
                new EnergyGlobalDemandItem(
                {
                    value: 12,
                    category: `Heating`,
                    summary: `Heating 12%`
                }),
                new EnergyGlobalDemandItem(
                {
                    value: 11,
                    category: `Lighting`,
                    summary: `Lighting 11%`
                }),
                new EnergyGlobalDemandItem(
                {
                    value: 15,
                    category: `Other`,
                    summary: `Other 15%`
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
ts

import { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import { IgcDataPieChartModule, IgcItemLegendModule } from 'igniteui-webcomponents-charts';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, DataPieChartDescriptionModule, ItemLegendDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcDataPieChartComponent } from 'igniteui-webcomponents-charts';
import { EnergyGlobalDemandItem, EnergyGlobalDemand } from './EnergyGlobalDemand';
import { IgcPropertyEditorPropertyDescriptionButtonClickEventArgs } from 'igniteui-webcomponents-layouts';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
import { ModuleManager } from 'igniteui-webcomponents-core';

defineAllComponents();

import "./index.css";

ModuleManager.register(
    IgcPropertyEditorPanelModule,
    IgcDataPieChartModule,
    IgcItemLegendModule
);

export class Sample {

    private propertyEditorPanel1: IgcPropertyEditorPanelComponent
    private propertyEditorPropertyDescription1: IgcPropertyEditorPropertyDescriptionComponent
    private chart: IgcDataPieChartComponent
    private _bind: () => void;

    constructor() {
        var propertyEditorPanel1 = this.propertyEditorPanel1 = document.getElementById('propertyEditorPanel1') as IgcPropertyEditorPanelComponent;
        var propertyEditorPropertyDescription1 = this.propertyEditorPropertyDescription1 = document.getElementById('propertyEditorPropertyDescription1') as IgcPropertyEditorPropertyDescriptionComponent;
        this.editorButtonReplayTransitionInDomain = this.editorButtonReplayTransitionInDomain.bind(this);
        var chart = this.chart = document.getElementById('chart') as IgcDataPieChartComponent;

        this._bind = () => {
            propertyEditorPanel1.componentRenderer = this.renderer;
            propertyEditorPanel1.target = this.chart;
            propertyEditorPropertyDescription1.buttonClicked = this.editorButtonReplayTransitionInDomain;
            chart.dataSource = this.energyGlobalDemand;
        }
        this._bind();
    }

    private _energyGlobalDemand: EnergyGlobalDemand = null;
    public get energyGlobalDemand(): EnergyGlobalDemand {
        if (this._energyGlobalDemand == null)
        {
            this._energyGlobalDemand = new EnergyGlobalDemand();
        }
        return this._energyGlobalDemand;
    }

    private _componentRenderer: ComponentRenderer = null;
    public get renderer(): ComponentRenderer {
        if (this._componentRenderer == null) {
            this._componentRenderer = new ComponentRenderer();
            var context = this._componentRenderer.context;
            PropertyEditorPanelDescriptionModule.register(context);
            DataPieChartDescriptionModule.register(context);
            ItemLegendDescriptionModule.register(context);
        }
        return this._componentRenderer;
    }

    public editorButtonReplayTransitionInDomain(sender: any, args: IgcPropertyEditorPropertyDescriptionButtonClickEventArgs): void {
        var chart = this.chart;
        chart.replayTransitionIn();
    }

}

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="options vertical">
        <igc-property-editor-panel

        description-type="DataPieChart"
        is-horizontal="true"
        is-wrapping-enabled="true"
        name="propertyEditorPanel1"
        id="propertyEditorPanel1">
            <igc-property-editor-property-description
            property-path="ReplayTransitionIn"
            label="Replay Animation"
            primitive-value="Replay Animation"
            value-type="Button"
            name="propertyEditorPropertyDescription1"
            id="propertyEditorPropertyDescription1">
            </igc-property-editor-property-description>
        </igc-property-editor-panel>
    </div>

    <div class="legend-title">
        Global Electricity Demand by Energy Use
    </div>

    <div class="container fill">
        <igc-data-pie-chart
        name="chart"
        id="chart"
        transition-in-mode="Auto"
        transition-in-duration="1000"
        transition-in-speed-type="Random"
        highlighting-mode="None">
        </igc-data-pie-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

Additional Resources

API References

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

Chart Type	Control Name	API Members
Data Pie Chart	`IgcDataPieChartComponent`	`IgcDataPieChartComponent`
Item Legend	`IgcItemLegendComponent`	`IgcItemLegendComponent`