Web Components Donut Chart

The Ignite UI for Web Components Donut Chart is similar to the Pie Chart, proportionally illustrating the occurrences of a variable. The donut chart can display multiple variables in concentric rings, and provides built-in support for visualizing hierarchical data. The rings are capable of being bound to a different data item, or they can share a common data source.

Web Components Donut Chart Example

You can create Donut Chart using the IgcDoughnutChartComponent control by binding your data as shown in the example below.

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 { IgcItemLegendModule, IgcDoughnutChartModule } from 'igniteui-webcomponents-charts';
import { IgcItemLegendComponent, IgcDoughnutChartComponent, IgcRingSeriesComponent } from 'igniteui-webcomponents-charts';
import { EnergyGlobalDemandItem, EnergyGlobalDemand } from './EnergyGlobalDemand';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";


ModuleManager.register(
    IgcItemLegendModule,
    IgcDoughnutChartModule
);

export class Sample {

    private legend: IgcItemLegendComponent
    private chart: IgcDoughnutChartComponent
    private series: IgcRingSeriesComponent
    private _bind: () => void;

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

        this._bind = () => {
            series.dataSource = this.energyGlobalDemand;
            series.legend = this.legend;
        }
        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="legend">
        <igc-item-legend
        name="legend"
        id="legend"
        orientation="Horizontal">
        </igc-item-legend>
    </div>

    <div class="container fill">
        <igc-doughnut-chart
        name="chart"
        id="chart"
        allow-slice-explosion="true">
            <igc-ring-series
            name="series"
            id="series"
            label-member-path="summary"
            labels-position="OutsideEnd"
            label-extent="30"
            value-member-path="value"
            legend-label-member-path="category"
            outlines="white"
            radius-factor="0.6"
            start-angle="30">
            </igc-ring-series>
        </igc-doughnut-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 Donut Chart Recommendations

Are Web Components Donut Charts right for your project?

Donut Charts are appropriate for small data sets and are easy to read at a glance. Donut charts are just one type of part-to-whole visualization. Others include:

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

Legends
Slice Explosion
Slice Selection
Chart Animations

Best Practices for Donut Charts

Using multiple data sets to display your data in a ring display.
Placing the information such as values or labels, within the hole of the donut for quick explanation of data.
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.
Ensuring data segments add up to 100%.
Ensuring the color palette is distinguishable for segments/slices of the parts.

When not to use a Donut Chart

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.
You have negative data, as this can not be represented in a donut chart.

Web Components Donut Chart - Slice Selection

The Web Components Donut Chart has the ability to select slices on click. Optionally, you may apply a single custom visual style to the selected slices. The SliceClick event is raised when the user clicks on a slice. Enabling slice selection allows you to modify the slice's selection upon click. The following sample demonstrates how to enable slice selection and set the selected slice color to gray.

import { IgcDoughnutChartModule } from 'igniteui-webcomponents-charts';
import { IgcItemLegendComponent } from 'igniteui-webcomponents-charts';
import { IgcItemLegendModule } from 'igniteui-webcomponents-charts';
import { IgcDoughnutChartComponent } from 'igniteui-webcomponents-charts';
import { IgcRingSeriesComponent } from 'igniteui-webcomponents-charts';
import { IgcRingSeriesModule } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { IgcSliceClickEventArgs } from 'igniteui-webcomponents-charts';

ModuleManager.register(
    IgcDoughnutChartModule,
    IgcRingSeriesModule,
    IgcItemLegendModule
);

export class DoughnutChartSelection {

    private chart: IgcDoughnutChartComponent;
    private selectedSliceLabel: HTMLLabelElement;
    private selectedSliceValue: HTMLLabelElement;
    private data: any[];

    constructor() {
        this.data = [
            { MarketShare: 37, Category: "Cooling", Summary: "Cooling 37%", },
            { MarketShare: 25, Category: "Residential", Summary: "Residential 25%",  },
            { MarketShare: 12, Category: "Heating", Summary: "Heating 12%", },
            { MarketShare: 8, Category: "Lighting", Summary: "Lighting 8%", },
            { MarketShare: 18, Category: "Other", Summary: "Other 18%", }
        ];

        let ringSeries = document.getElementById('ringSeries') as IgcRingSeriesComponent;
        ringSeries.dataSource = this.data;
        ringSeries.legend = document.getElementById('legend') as IgcItemLegendComponent
        ringSeries.selectedSlices.add(0);

        this.chart = document.getElementById('chart') as IgcDoughnutChartComponent;
        this.chart.sliceClick = this.onSliceClick;

        this.selectedSliceLabel = document.getElementById('selectedSliceLabel') as HTMLLabelElement;
        this.selectedSliceLabel!.innerText = this.data[0].Category;
        this.selectedSliceValue = document.getElementById('selectedSliceValue') as HTMLLabelElement;
        this.selectedSliceValue!.innerText = this.data[0].MarketShare + "%";
    }

    public onSliceClick = (s: IgcDoughnutChartComponent, e: IgcSliceClickEventArgs) => {
        if (e.isSelected) {
            this.selectedSliceLabel.innerText = this.data[e.index].Category;
            this.selectedSliceValue.innerText = this.data[e.index].MarketShare + "%";
        } else {
            this.selectedSliceLabel.innerText = "No Selection";
            this.selectedSliceValue.innerText = "0%";
        }
    }
}

new DoughnutChartSelection();
ts

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

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

  </head>

  <body>
    <div id="root">

<div class="container sample" >
    <div class="options vertical">
        <span class="legend-title">Global Electricity Demand by Energy Use</span>
        <div class="legend">
            <igc-item-legend id="legend" orientation="Horizontal"></igc-item-legend>
        </div>
    </div>

    <div class="container relative">
        <div class="container-overlay">
            <igc-doughnut-chart
                id="chart"
                width="100%"
                height="100%"
                allow-slice-selection="true"
                inner-extent="0.6">
                <igc-ring-series
                    name="ringSeries" id="ringSeries"
                    label-member-path="Summary"
                    labels-position="OutsideEnd"
                    label-extent="30"
                    value-member-path="MarketShare"
                    legend-label-member-path="Category"
                    radius-factor="0.7"
                    start-angle="30"
                    >
                </igc-ring-series>
            </igc-doughnut-chart>

            <div class="overlay-center" style="line-height: 1.1;">
              <label id="selectedSliceLabel" class="options-label" style="font-size: 1.2rem;"></label>
              <label id="selectedSliceValue" class="options-label" style="font-size: 2.2rem;"></label>
          </div>
        </div>
    </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 Donut Chart - Multiple Rings

It is possible to have a multiple ring display in the Web Components Donut Chart, with each of the rings capable of being bound to a different data item, or they can share a common data source. This can be helpful if you need to display your data as tiers that have an underlying common category, such as the season to month data display below:

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

    public value: number;
    public label: string;

}
export class CalendarMonths extends Array<CalendarMonthsItem> {
    public constructor(items: Array<CalendarMonthsItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new CalendarMonthsItem(
                {
                    value: 1,
                    label: `December`
                }),
                new CalendarMonthsItem(
                {
                    value: 1,
                    label: `January`
                }),
                new CalendarMonthsItem(
                {
                    value: 1,
                    label: `February`
                }),
                new CalendarMonthsItem(
                {
                    value: 1,
                    label: `March`
                }),
                new CalendarMonthsItem(
                {
                    value: 1,
                    label: `April`
                }),
                new CalendarMonthsItem(
                {
                    value: 1,
                    label: `May`
                }),
                new CalendarMonthsItem(
                {
                    value: 1,
                    label: `June`
                }),
                new CalendarMonthsItem(
                {
                    value: 1,
                    label: `July`
                }),
                new CalendarMonthsItem(
                {
                    value: 1,
                    label: `August`
                }),
                new CalendarMonthsItem(
                {
                    value: 1,
                    label: `September`
                }),
                new CalendarMonthsItem(
                {
                    value: 1,
                    label: `October`
                }),
                new CalendarMonthsItem(
                {
                    value: 1,
                    label: `November`
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
ts

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

    public value: number;
    public label: string;

}
export class CalendarSeasons extends Array<CalendarSeasonsItem> {
    public constructor(items: Array<CalendarSeasonsItem> | number = -1) {
        if (Array.isArray(items)) {
            super(...items);
        } else {
            const newItems = [
                new CalendarSeasonsItem(
                {
                    value: 4,
                    label: `Winter`
                }),
                new CalendarSeasonsItem(
                {
                    value: 4,
                    label: `Spring`
                }),
                new CalendarSeasonsItem(
                {
                    value: 4,
                    label: `Summer`
                }),
                new CalendarSeasonsItem(
                {
                    value: 4,
                    label: `Fall`
                }),
            ];
            super(...newItems.slice(0));
        }
    }
}
ts

import { IgcLegendModule, IgcDoughnutChartModule } from 'igniteui-webcomponents-charts';
import { IgcDoughnutChartComponent, IgcRingSeriesComponent } from 'igniteui-webcomponents-charts';
import { CalendarSeasonsItem, CalendarSeasons } from './CalendarSeasons';
import { CalendarMonthsItem, CalendarMonths } from './CalendarMonths';
import { ModuleManager } from 'igniteui-webcomponents-core';
import "./index.css";


ModuleManager.register(
    IgcLegendModule,
    IgcDoughnutChartModule
);

export class Sample {

    private chart: IgcDoughnutChartComponent
    private series1: IgcRingSeriesComponent
    private series2: IgcRingSeriesComponent
    private _bind: () => void;

    constructor() {
        var chart = this.chart = document.getElementById('chart') as IgcDoughnutChartComponent;
        var series1 = this.series1 = document.getElementById('series1') as IgcRingSeriesComponent;
        var series2 = this.series2 = document.getElementById('series2') as IgcRingSeriesComponent;

        this._bind = () => {
            series1.dataSource = this.calendarSeasons;
            series2.dataSource = this.calendarMonths;
        }
        this._bind();
    }

    private _calendarSeasons: CalendarSeasons = null;
    public get calendarSeasons(): CalendarSeasons {
        if (this._calendarSeasons == null)
        {
            this._calendarSeasons = new CalendarSeasons();
        }
        return this._calendarSeasons;
    }

    private _calendarMonths: CalendarMonths = null;
    public get calendarMonths(): CalendarMonths {
        if (this._calendarMonths == null)
        {
            this._calendarMonths = new CalendarMonths();
        }
        return this._calendarMonths;
    }

}

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">
        Hierarchical Chart
    </div>

    <div class="container fill">
        <igc-doughnut-chart
        name="chart"
        id="chart"
        allow-slice-explosion="false"
        allow-slice-selection="false">
            <igc-ring-series
            name="series1"
            id="series1"
            label-member-path="label"
            value-member-path="value"
            labels-position="Center"
            radius-factor="0.9"
            outlines="white"
            brushes="rgba(60, 189, 201, 1) rgba(159, 179, 40, 1) rgba(249, 98, 50, 1) rgba(138, 88, 214, 1)">
            </igc-ring-series>
            <igc-ring-series
            name="series2"
            id="series2"
            label-member-path="label"
            value-member-path="value"
            labels-position="Center"
            radius-factor="0.9"
            outlines="white"
            brushes="rgba(60, 189, 201, 1) rgba(60, 189, 201, 1) rgba(60, 189, 201, 1) rgba(159, 179, 40, 1) rgba(159, 179, 40, 1) rgba(159, 179, 40, 1) rgba(249, 98, 50, 1) rgba(249, 98, 50, 1) rgba(249, 98, 50, 1) rgba(138, 88, 214, 1) rgba(138, 88, 214, 1) rgba(138, 88, 214, 1)">
            </igc-ring-series>
        </igc-doughnut-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

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

API References

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