Doughnut Chart

The IgrDoughnutChart component is similar to the Pie Chart component, proportionally illustrating the occurrences of a variable. The doughnut chart can display multiple variables in concentric rings, and provides built-in support for visualizing hierarchical data.

Demo

Dependencies

When installing the charts package, the core package must also be installed.
npm install igniteui-react-core
npm install igniteui-react-charts

In order to use the Doughnut chart, you need to register the IgrDoughnutChartModule and IgrRingSeriesModule in your app during load:

import { IgrDoughnutChartModule } from 'igniteui-react-charts/ES5/igr-doughnut-chart-module';
import { IgrDoughnutChart } from 'igniteui-react-charts/ES5/igr-doughnut-chart';
import { IgrRingSeriesModule } from 'igniteui-react-charts/ES5/igr-ring-series-module';
import { IgrRingSeries } from 'igniteui-react-charts/ES5/igr-ring-series';

IgrDoughnutChartModule.register();
IgrRingSeriesModule.register();

Usage

Now that the doughnut chart module is imported, next step is to bind it to data. In order to create the component, you must first have data to bind it to. The following code snippet demonstrates how to create a simple data source.

this.state = {
    data: [
        { MarketShare: 30, Company: "Google",    },
        { MarketShare: 15, Company: "Microsoft", },
        { MarketShare: 30, Company: "Apple",     },
        { MarketShare: 15, Company: "Samsung",   },
        { MarketShare: 10, Company: "Other",     },
] };

The following code demonstradtes how to bind the doughnut chart to the above data.

<IgrDoughnutChart
    height="100%">
    <IgrRingSeries 
        name="ring1"
        dataSource={this.state.data}
        labelMemberPath="Company"
        valueMemberPath="MarketShare"/>
</IgrDoughnutChart>

Configurable Elements

Multiple Rings

The IgrDoughnutChart can display multiple rings at the same time with each of the rings capable of being bound to a different collection, or they can share a common data source.

Slice Selection

The IgrDoughnutChart component exposes the API for setting the state of one or more slices to selected. Optionally, you may apply a single custom visual style to the selected slices.

Enable/disable slice selection - You can enable (default setting) or disable slice selection in the doughnut chart by setting the allowSliceSelection property.

<IgrDoughnutChart
    height="100%"
    allowSliceSelection="true"
    ref={this.onPieRef}
    sliceClick={this.onSliceClick}>
    <IgrRingSeries 
        name="ring1"
        dataSource={this.state.data}
        labelMemberPath="Company"
        valueMemberPath="MarketShare"/>
</IgrDoughnutChart>

Configuring the look of the selected slices - You can define how the selected slices will look by defining a style with a targetType of Slice and assigning it to the selectedStyle property of the doughnut chart.

Changing the selection state upon slice click - If you attach an event handler for the sliceClick event, it supplies a reference to the clicked slice in the event arguments allowing you to modify its selection state. The doughnut chart exposes a selectedStyle property that determines the look of the selected slices. By default, no style is applied, and selecting a slice will not alter its appearance in any way. In order to apply your own style to the selected slices you need to define a Style with targetType of Slice and set it as the value of the selectedStyle property.

Setting the IsSelected property - The IgrDoughnutChart holds references to all the slices allowing you to modify their isSelected property directly. The doughnut chart exposes a sliceClick event used to change the selected/unselected state of a slice.

Modifying the contents of the SelectedSlices collection - You can change the selected slice by changing the contents of the selectedSlices collection. The doughnut chart holds references to all the slices allowing you to modify their isSelected property directly to the Slice objects.

Slice Selection Demo

Slice Explosion

The IgrDoughnutChart slices explode either programmatically or by user interaction.

Enable/disable slice explosion You can enable or disable the ability to explode slices by setting the allowSliceExplosion property.

Changing the exploded state of a slice upon slice click If you attach an event handler for the sliceClick event, a reference to the clicked slice is supplied in the event arguments and you can modify its exploded state.

Setting the IsExploded property The IgrDoughnutChart holds references to all the slices allowing you to modify their isExploded property directly.

Modifying the contents of the ExplodedSlices collection You can change the exploded slices by changing the contents of the explodedSlices collection.

import { SliceClickEventArgs } from "igniteui-react-charts/ES5/igr-slice-click-event-args";
<IgrDoughnutChart
    ref={this.onChartRef}
    height="100%"
    allowSliceExplosion="true"
    sliceClick={this.onSliceClick}>
    <IgrRingSeries
        name="ring1"
        dataSource={this.state.data}
        labelMemberPath="Company"
        valueMemberPath="MarketShare"
        radiusFactor={0.7}/>
</IgrDoughnutChart>
public onSliceClick = (s: IgrDoughnutChart, e: SliceClickEventArgs) => {
    e.isExploded = !e.isExploded;
    e.isSelected = false;
}

Slice Explosion Demo

Legend

The IgrDoughnutChart supports the use of a legend. The legend used is the ItemLegend which is connected though the series of the chart.

import { IgrItemLegendModule } from 'igniteui-react-charts/ES5/igr-item-legend-module';
import { IgrItemLegend } from 'igniteui-react-charts/ES5/igr-item-legend';

IgrItemLegendModule.register();
<div className="legend">
    <IgrItemLegend ref={this.onLegendRef} />
</div>
<div className="chart">
    <IgrDoughnutChart ref={this.onChartRef}
        width="300px"
        height="300px">
        <IgrRingSeries 
            name="ring1"
            dataSource={this.state.data}
            labelMemberPath="Company"
            valueMemberPath="MarketShare"/>
    </IgrDoughnutChart>
</div>
public chart: IgrDoughnutChart;
public legend: IgrItemLegend;
...
this.onChartRef = this.onChartRef.bind(this);
this.onLegendRef = this.onLegendRef.bind(this);
...
public onChartRef(chart: IgrDoughnutChart) {
    this.chart = chart;
    if (this.legend) {
        this.chart.actualSeries[0].legend = this.legend;
    }
}

public onLegendRef(legend: IgrItemLegend) {
    this.legend = legend;
    if (this.chart) {
        this.chart.actualSeries[0].legend = this.legend;
    }
}

Legend Demo