This topic provides an overall look at the igDoughnutChart™ control.
This topic contains the following sections:
igDoughnutChart control allows for proportionally illustrating the occurrences of a variable. The inner radius of the control is configurable, and the Doughnut Chart’s series provides a built-in support for selecting and exploding its slices.
Visualizing the occurrence of multiple variables (adding multiple series) is possible, using concentric rings. The chart can be styled by configuring its properties or applying themes.
The following screenshot illustrates an
igDoughnutChart with two series.
The following table summarizes the main features of the
|Configurable rings||Each series of the
|Multiple rings support||The
The following table summarizes the user interaction capabilities of the
|The user can…||Using…||Details||Configurable?|
Enabling slice selection or slice explosion allows you to modify the slice’s selection and explosion state upon click.
|Configuring Selection and Explosion (igDoughnutChart)|
The following topics provide additional information related to this topic.
Adding igDoughnutChart: This topic explains how to add the
igDoughnutChart to an HTML page.
Configuring Selection and Explosion (igDoughnutChart): This topic explains how to configure the slice selection and explosion on
jQuery and MVC API Links (igDoughnutChart): This topic provides links to the API documentation about the
igDoughnutChart control and the Ignite UI for MVC for it.
The following samples provide additional information related to this topic.
Bind to Collection: This sample demonstrates how to render
igDoughnutChart using the Ignite UI for MVC and bind it to a collection of objects on the server.
Bind to JSON: This sample demonstrates how to bind doughnut chart to JSON data.
Labels and Tooltips: This sample demonstrates how to configure labels, tooltips and other options on
Configure Legend: This sample demonstrates how to configure
View on GitHub