Ignite UI™ API Documentation

ui.igDoughnutChart

Overview
Options
Events
Methods
Theming

The igDoughnutChart displays data similar to a pie chart and can display multiple sets of data around a common center. Further information regarding the classes, options, events, methods and themes of this API are available under the associated tabs above. The following code snippet demonstrates how to initialize the igDoughnutChart control.

Code Sample

        <!DOCTYPE html>
        <html>
        <head>
            <title></title>

            <!-- Ignite UI Required Combined CSS Files -->
            <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
            <link href="css/structure/infragistics.css" rel="stylesheet" />

            <script src="js/modernizr.min.js"></script>
            <script src="js/jquery.min.js"></script>
            <script src="js/jquery-ui.min.js"></script>

            <!-- Ignite UI Required Combined JavaScript Files -->
            <script src="js/infragistics.core.js"></script>
            <script src="js/infragistics.dv.js"></script>

        </head>
        <body>

            <div id="chart"></div>

            <script>
                $(function () {

                    var data = [
                        { "CountryName": "China", "Pop1990": 1141, "Pop2008": 1333, "Pop2025": 1458 },
                        { "CountryName": "India", "Pop1990": 849, "Pop2008": 1140, "Pop2025": 1398 },
                        { "CountryName": "United States", "Pop1990": 250, "Pop2008": 304, "Pop2025": 352 },
                        { "CountryName": "Indonesia", "Pop1990": 178, "Pop2008": 228, "Pop2025": 273 },
                        { "CountryName": "Brazil", "Pop1990": 150, "Pop2008": 192, "Pop2025": 223 }
                    ];

                    $("#chart").igDoughnutChart({
                        width: "500px",
                        height: "500px",
                        series:
                            [{
                                    name: "Pop1990",
                                    labelMemberPath: "CountryName",
                                    valueMemberPath: "Pop1990",
                                    dataSource: data
                            }]
                    });

                });
            </script>

        </body>
        </html>

Related Samples

allowSliceExplosion

Type:: bool
Default:: true

Gets or sets whether the slices can be exploded.

Code Sample

 
        // Initialize
        $("#chart").igDoughnutChart({
            allowSliceExplosion : true
        });
        
        // Get
        var allowSliceExplosion = $("#chart").igDoughnutChart("option", "allowSliceExplosion");
        
        // Set
        $("#chart").igDoughnutChart("option", "allowSliceExplosion", true);

allowSliceSelection

Type:: bool
Default:: true

Gets or sets whether the slices can be selected.

Code Sample

 
        // Initialize
        $("#chart").igDoughnutChart({
            allowSliceSelection : true
        });
        
        // Get
        var allowSliceSelection = $("#chart").igDoughnutChart("option", "allowSliceSelection");
        
        // Set
        $("#chart").igDoughnutChart("option", "allowSliceSelection", true);

dataSource
Inherited

Type:: object
Default:: null

Gets sets a valid data source.
That can be instance of array or primitives, array of objects, instance of $.ig.DataSource, or any other data accepted by $.ig.DataSource.
Note: if it is set to string and "dataSourceType" option is not set, then $.ig.JSONPDataSource is used.

Code Sample

 
// Data
var data = [
	{ "CountryName": "China", "Pop1990": 1141, "Pop2008": 1333, "Pop2025": 1458 },
               { "CountryName": "India", "Pop1990": 849, "Pop2008": 1140, "Pop2025": 1398 },
               { "CountryName": "United States", "Pop1990": 250, "Pop2008": 304, "Pop2025": 352 },
               { "CountryName": "Indonesia", "Pop1990": 178, "Pop2008": 228, "Pop2025": 273 },
               { "CountryName": "Brazil", "Pop1990": 150, "Pop2008": 192, "Pop2025": 223 }];

// Initialize
$("#chart").igDoughnutChart({
	dataSource: data
});

// Get
var dataSource = $(".selector").igDoughnutChart("option", "dataSource");

// Set
$(".selector").igDoughnutChart("option", "dataSource", data);

dataSourceType
Inherited

Type:: string
Default:: null

Gets sets data source type (such as "json", "xml", etc). Please refer to the documentation of $.ig.DataSource and its type property.

Code Sample

 
//Initialize
$(".selector").igDoughnutChart({
    dataSourceType: "json"
});
  
//Get
var type= $(".selector").igDoughnutChart("option", "dataSourceType");
 
//Set
$(".selector").igDoughnutChart("option", "dataSourceType", "http://myhost/data");

dataSourceUrl
Inherited

Type:: string
Default:: null

Gets sets url which is used for sending JSON on request for remote data.

Code Sample

 
//Initialize
$(".selector").igDoughnutChart({
    dataSourceUrl : "http://myhost/data"
});
  
//Get
var url = $(".selector").igDoughnutChart("option", "dataSourceUrl");
 
//Set
$(".selector").igDoughnutChart("option", "dataSourceUrl", "http://myhost/data");

height

Type:: enumeration
Default:: null

The height of the chart. It can be set as a number in pixels, string (px) or percentage (%).

Members

string
The widget height can be set in pixels (px) and percentage (%).
number
The widget height can be set as a number.

Code Sample

 
        // Initialize
        $("#chart").igDoughnutChart({
            height : "400px"
        });
        
        // Get
        var height = $("#chart").igDoughnutChart("option", "height");
        
        // Set
        $("#chart").igDoughnutChart("option", "height", "400px");

innerExtent

Type:: number
Default:: 40

Gets or sets the inner extent of the doughnut chart. It is percent from the outer ring's radius.

Code Sample

 
        // Initialize
        $("#chart").igDoughnutChart({
            innerExtent : 10
        });
        
        // Get
        var innerExtent = $("#chart").igDoughnutChart("option", "innerExtent");
        
        // Set
        $("#chart").igDoughnutChart("option", "innerExtent", 10);

isSurfaceInteractionDisabled

Type:: bool
Default:: false

Gets or sets whether all surface interactions with the plot area should be disabled.

Code Sample

 
        // Initialize
        $("#chart").igDoughnutChart({
            isSurfaceInteractionDisabled : true
        });
        
        // Get
        var isSurfaceInteractionDisabled = $("#chart").igDoughnutChart("option", "isSurfaceInteractionDisabled");
        
        // Set
        $("#chart").igDoughnutChart("option", "isSurfaceInteractionDisabled", true);

maxRecCount
Inherited

Type:: number
Default:: 0

Gets sets maximum number of displayed records in chart.

Code Sample

 
$(".selector").igDoughnutChart({
    maxRecCount : 100
});
  
//Get
var count = $(".selector").igDoughnutChart("option", "maxRecCount");
  
//Set
$(".selector").igDoughnutChart("option", "maxRecCount", 100);

pixelScalingRatio

Type:

number

Default:

NaN

Gets or sets the scaling value used to affect the pixel density of the control.
A higher scaling ratio will produce crisper visuals at the expense of memory. Lower values will cause the control
to appear blurry.

responseDataKey
Inherited

Type:: string
Default:: null

See $.ig.DataSource. This is basically the property in the responses where data records are held, if the response is wrapped.

Code Sample

 
//Initialize
$(".selector").igDoughnutChart({
    responseDataKey : "d.results"
});
  
//Get
var key = $(".selector").igDoughnutChart("option", "responseDataKey");
  
//Set
$(".selector").igDoughnutChart("option", "responseDataKey", "d.results");

responseTotalRecCountKey
Inherited

Type:: string
Default:: null

See $.ig.DataSource. property in the response specifying the total number of records on the server.

Code Sample

 
$(".selector").igDoughnutChart({
    responseTotalRecCountKey : "total"
});
  
//Get
var key = $(".selector").igDoughnutChart("option", "responseTotalRecCountKey");
  
//Set
$(".selector").igDoughnutChart("option", "responseTotalRecCountKey", "total");

selectedStyle

Type:: object
Default:: null

Gets or sets the style used when a slice is selected.

Code Sample

 
        // Initialize
        $("#chart").igDoughnutChart({
            selectedStyle : { fill: "red", stroke: "blue", strokeThickness: 3, opacity: 1 }
        });
        
        // Get
        var selectedStyle = $("#chart").igDoughnutChart("option", "selectedStyle");
        
        // Set
        $("#chart").igDoughnutChart("option", "selectedStyle", { fill: "red", stroke: "blue", strokeThickness: 3, opacity: 1 });

series

Type:: array
Default:: []
Elements Type:: object

An array of series objects.

Code Sample

 
        // Initialize
        $("#chart").igDoughnutChart({
           series: 
              [{
                  name: "Pop1990",
                  labelMemberPath: "CountryName",
                  valueMemberPath: "Pop1990",
                  dataSource: data
              }]
        });
        
        // Get (Only returns the value last set to the option, the actual series that are displayed may differ.)
        var series = $("#chart").igDoughnutChart("option", "series");
        
        // Update the series with the specified name
        $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", brushes: ["red"] }]);

brushes

Type:: object
Default:: null

Gets or sets the palette of brushes to use for coloring the slices.
The value provided should be an array of css color strings or JavaScript objects defining gradients. Optionally the first element can be a string reading "RGB" or "HSV" to specify the interpolation mode of the collection.

Code Sample

 
        // Initialize
        $("#chart").igDoughnutChart({
           series: 
              [{
                  brushes: ["red", "yellow", "blue"],
                  name: "Pop1990",
                  labelMemberPath: "CountryName",
                  valueMemberPath: "Pop1990",
                  dataSource: data
              }]
        });
        
        // Get
        var series = $("#chart").igDoughnutChart("option", "series");
        series[0].brushes;
        
        // Set
        $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", brushes: ["red", "yellow", "blue"] }]);

formatLabel

Type:: object
Default:: null

Sets or gets a function which takes an object that produces a formatted label for displaying in the chart.

Code Sample

 
        // Initialize
        $("#chart").igDoughnutChart({
           series: 
              [{
                  formatLabel: function(context){
                    // context.isOthersSlice; returns true if this is the "others" slice
                    // context.item; returns the datasource item for the current slice
                    // context.itemLabel; returns the label that will be used
                    // context.percentValue; returns the percent value for the current slice
                    
                    // In order to change the label you need to return the desired string e.g.:
                    return Math.round(context.percentValue * 10) / 10;
                  },
                  name: "Pop1990",
                  labelMemberPath: "CountryName",
                  valueMemberPath: "Pop1990",
                  dataSource: data
              }]
        });
        
        // Get
        var series = $("#chart").igDoughnutChart("option", "series");
        series[0].formatLabel;
        
        // Set
        $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", formatLabel: function(context) {return context.itemLabel.toLowerCase(); } }]);

formatLegendLabel

Type:: object
Default:: null

Sets or gets a function which takes an object that produces a formatted label for displaying in the chart's legend.

Code Sample

 
        // Initialize
        $("#chart").igDoughnutChart({
           series: 
              [{
                  formatLegendLabel: function(context){
                    // context.isOthersSlice; returns true if this is the "others" slice
                    // context.item; returns the datasource item for the current slice
                    // context.itemLabel; returns the label that will be used
                    // context.percentValue; returns the percent value for the current slice
                    
                    // In order to change the label you need to return the desired string e.g.:
                    return Math.round(context.percentValue * 10) / 10;
                  },
                  name: "Pop1990",
                  labelMemberPath: "CountryName",
                  valueMemberPath: "Pop1990",
                  dataSource: data
              }]
        });
        
        // Get
        var series = $("#chart").igDoughnutChart("option", "series");
        series[0].formatLegendLabel;
        
        // Set
        $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", formatLegendLabel: function(context) {return context.itemLabel.toLowerCase(); } }]);

isSurfaceInteractionDisabled

Type:: bool
Default:: false

Gets or sets whether all surface interactions with the plot area should be disabled.

Code Sample

 
        // Initialize
        $("#chart").igDoughnutChart({
           series: 
              [{
                  isSurfaceInteractionDisabled: true,
                  name: "Pop1990",
                  labelMemberPath: "CountryName",
                  valueMemberPath: "Pop1990",
                  dataSource: data
              }]
        });
        
        // Get
        var series = $("#chart").igDoughnutChart("option", "series");
        series[0].isSurfaceInteractionDisabled;
        
        // Set
        $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", isSurfaceInteractionDisabled: true }]);

itemsSource

Type:: object
Default:: null

Gets or sets the data source for the chart.

Code Sample

 
// Data
var data = [
	{ "CountryName": "China", "Pop1990": 1141, "Pop2008": 1333, "Pop2025": 1458 },
               { "CountryName": "India", "Pop1990": 849, "Pop2008": 1140, "Pop2025": 1398 },
               { "CountryName": "United States", "Pop1990": 250, "Pop2008": 304, "Pop2025": 352 },
               { "CountryName": "Indonesia", "Pop1990": 178, "Pop2008": 228, "Pop2025": 273 },
               { "CountryName": "Brazil", "Pop1990": 150, "Pop2008": 192, "Pop2025": 223 }];

// Initialize
$("#chart").igDoughnutChart({
	series: [{
		itemsSource: data,
		name: "Pop1990",
		labelMemberPath: "CountryName",
		valueMemberPath: "Pop1990"
	}]
});
        
// Get
var series = $("#chart").igDoughnutChart("option", "series");
series[0].itemsSource;
        
// Set
$("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", itemsSource: data }]);

labelExtent

Type:: number
Default:: 10

Gets or sets the pixel amount by which the labels are offset from the edge of the slices.

Code Sample

 
        // labelsPosition has to be set to "outsideEnd" in order for the labelExtent to apply
        // Initialize
        $("#chart").igDoughnutChart({
           series: 
              [{
                  labelExtent: 50,
                  labelsPosition: "outsideEnd",
                  name: "Pop1990",
                  labelMemberPath: "CountryName",
                  valueMemberPath: "Pop1990",
                  dataSource: data
              }]
        });
        
        // Get
        var series = $("#chart").igDoughnutChart("option", "series");
        series[0].labelExtent;
        
        // Set
        $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", labelExtent: 50 }]);

labelFormat

Type:

string

Default:

null

Gets or sets the label format string to use for the label.
labelFormatSpecifiers

Type:

object

Default:

null

Gets or sets the format specifiers to use with the LabelFormat string.
labelInnerColor

Type:

string

Default:

null

Gets or sets the color for labels rendered inside of the pie chart.

labelMemberPath

Type:: string
Default:: null

Gets or sets the property name that contains the labels.

Code Sample

 
        // Initialize
        $("#chart").igDoughnutChart({
           series: 
              [{
                  labelMemberPath: "CountryName",
                  valueMemberPath: "Pop1990",
                  name: "Pop1990",
                  dataSource: data
              }]
        });
        
        // Get
        var series = $("#chart").igDoughnutChart("option", "series");
        series[0].labelMemberPath;
        
        // Set
        $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", labelMemberPath: "Pop1990" }]);

labelOuterColor

Type:

string

Default:

null

Gets or sets the color for labels rendered outside of the pie chart.

labelsPosition

Type:: enumeration
Default:: center

Gets or sets the position of chart labels.

Members

none
Type:string
No labels will be displayed.
center
Type:string
Labels will be displayed in the center.
insideEnd
Type:string
Labels will be displayed inside and by the edge of the container.
outsideEnd
Type:string
Labels will be displayed outside the container.
bestFit
Type:string
Labels will automatically decide their location.

Code Sample

 
        // Initialize
        $("#chart").igDoughnutChart({
           series: 
              [{
                  labelsPosition: "outsideEnd",
                  valueMemberPath: "Pop1990",
                  name: "Pop1990",
                  dataSource: data
              }]
        });
        
        // Get
        var series = $("#chart").igDoughnutChart("option", "series");
        series[0].labelsPosition;
        
        // Set
        $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", labelsPosition: "outsideEnd" }]);

leaderLineMargin

Type:: number
Default:: 6

Gets or sets the margin between a label and its leader line. The default is 6 pixels.

Code Sample

 
        // Initialize
        $("#chart").igDoughnutChart({
           series: 
              [{
                  leaderLineMargin: 0,
                  labelsPosition: "outsideEnd",
                  valueMemberPath: "Pop1990",
                  name: "Pop1990",
                  dataSource: data
              }]
        });
        
        // Get
        var series = $("#chart").igDoughnutChart("option", "series");
        series[0].leaderLineMargin;
        
        // Set
        $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", leaderLineMargin: 0 }]);

leaderLineStyle

Type:: object
Default:: null

Gets or sets the style for the leader lines.

Code Sample

 
var style = {
	stroke: "red",
	strokeThickness: 3,
	opacity: 0.5
};

// Initialize
        $("#chart").igDoughnutChart({
           series: 
              [{
                  leaderLineStyle: style,
                  labelsPosition: "outsideEnd",
                  valueMemberPath: "Pop1990",
                  name: "Pop1990",
                  dataSource: data
              }]
        });
        
        // Get
        var series = $("#chart").igDoughnutChart("option", "series");
        series[0].leaderLineStyle;
        
        // Set
        $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", leaderLineStyle: style }]);

leaderLineType

Type:: enumeration
Default:: straight

Gets or sets what type of leader lines will be used for the outside end labels.

Members

straight
Type:string
A straight line is drawn between the slice and its label.
arc
Type:string
A curved line is drawn between the slice and its label. The line follows makes a natural turn from the slice to the label.
spline
Type:string
A curved line is drawn between the slice and its label. The line starts radially from the slice and then turns to the label.

Code Sample

 
        // Initialize
        $("#chart").igDoughnutChart({
           series: 
              [{
                  leaderLineType: "spline",
                  labelsPosition: "outsideEnd",
                  valueMemberPath: "Pop1990",
                  name: "Pop1990",
                  dataSource: data
              }]
        });
        
        // Get
        var series = $("#chart").igDoughnutChart("option", "series");
        series[0].leaderLineType;
        
        // Set
        $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", leaderLineType: "spline" }]);

leaderLineVisibility

Type:: enumeration
Default:: visible

Gets or sets whether the leader lines are visible.

Members

visible
Type:string
Display the element.
collapsed
Type:string
Do not display the element.

Code Sample

 
        // Initialize
        $("#chart").igDoughnutChart({
           series: 
              [{
                  leaderLineVisibility: "collapsed",
                  labelsPosition: "outsideEnd",
                  valueMemberPath: "Pop1990",
                  name: "Pop1990",
                  dataSource: data
              }]
        });
        
        // Get
        var series = $("#chart").igDoughnutChart("option", "series");
        series[0].leaderLineVisibility;
        
        // Set
        $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", leaderLineVisibility: "collapsed" }]);

legend

Type:: object
Default:: null

Gets or sets the legend used for the current chart.

Code Sample

 
        // You need to supply a dom element to use for the legend (preferably a div element)
        // Initialize
        $("#chart").igDoughnutChart({
           series: 
              [{
                  legend: $("selectorForLegendElement"),
                  valueMemberPath: "Pop1990",
                  name: "Pop1990",
                  dataSource: data
              }]
        });
        
        // Get
        var series = $("#chart").igDoughnutChart("option", "series");
        series[0].legend;
        
        // Set
        $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", legend: $("selectorForLegendElement") }]);

legendLabelFormat

Type:

string

Default:

null

Gets or sets the label format string to use for the label.
legendLabelFormatSpecifiers

Type:

object

Default:

null

Gets or sets the format specifiers to use with the LegendLabelFormat string.

legendLabelMemberPath

Type:: string
Default:: null

Gets or sets the property name that contains the legend labels.

Code Sample

 
        // Initialize
        $("#chart").igDoughnutChart({
           series: 
              [{
                  legendLabelMemberPath: "Label",
                  valueMemberPath: "Pop1990",
                  name: "Pop1990",
                  dataSource: data
              }]
        });
        
        // Get
        var series = $("#chart").igDoughnutChart("option", "series");
        series[0].legendLabelMemberPath;
        
        // Set
        $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", legendLabelMemberPath: "Label" }]);

legendOthersLabelFormat

Type:

string

Default:

null

Gets or sets the label format string to use for the label.
legendOthersLabelFormatSpecifiers

Type:

object

Default:

null

Gets or sets the format specifiers to use with the LegendOthersLabelFormat string.

othersCategoryText

Type:: string
Default:: "Others"

Gets or sets the label of the Others slice.

Code Sample

 
        // Initialize
        $("#chart").igDoughnutChart({
           series:
              [{
                  othersCategoryText: "Others Label",
                  valueMemberPath: "Pop1990",
                  name: "Pop1990",
                  dataSource: data
              }]
        });
        
        // Get
        var series = $("#chart").igDoughnutChart("option", "series");
        series[0].othersCategoryText;
        
        // Set
        $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", othersCategoryText: "Others Label" }]);

othersCategoryThreshold

Type:: number
Default:: 3

Gets or sets the threshold value that determines if slices are grouped into the Others slice.

Code Sample

 
        // Initialize
        $("#chart").igDoughnutChart({
           series:
              [{
                  othersCategoryThreshold: 5,
                  valueMemberPath: "Pop1990",
                  name: "Pop1990",
                  dataSource: data
              }]
        });
        
        // Get
        var series = $("#chart").igDoughnutChart("option", "series");
        series[0].othersCategoryThreshold;
        
        // Set
        $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", othersCategoryThreshold: 5 }]);

othersCategoryType

Type:: enumeration
Default:: percent

Gets or sets whether to use numeric or percent-based threshold value.

Members

number
Type:string
Data value is compared directly to the value of OthersCategoryThreshold.
percent
Type:string
Data value is compared to OthersCategoryThreshold as a percentage of the total.

Code Sample

 
        // Initialize
        $("#chart").igDoughnutChart({
           series:
              [{
                  othersCategoryType: "number",
                  valueMemberPath: "Pop1990",
                  name: "Pop1990",
                  dataSource: data
              }]
        });
        
        // Get
        var series = $("#chart").igDoughnutChart("option", "series");
        series[0].othersCategoryType;
        
        // Set
        $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", othersCategoryType: "number", }]);

othersLabelFormat

Type:

string

Default:

null

Gets or sets the label format string to use for the label.
othersLabelFormatSpecifiers

Type:

object

Default:

null

Gets or sets the format specifiers to use with the OthersLabelFormat string.

outlines

Type:: object
Default:: null

Gets or sets the palette of brushes to use for outlines on the slices.
The value provided should be an array of css color strings or JavaScript objects defining gradients. Optionally the first element can be a string reading "RGB" or "HSV" to specify the interpolation mode of the collection.

Code Sample

 
        // Initialize
        $("#chart").igDoughnutChart({
           series: 
              [{
                  outlines: ["red", "yellow", "blue"],
                  name: "Pop1990",
                  labelMemberPath: "CountryName",
                  valueMemberPath: "Pop1990",
                  dataSource: data
              }]
        });
        
        // Get
        var series = $("#chart").igDoughnutChart("option", "series");
        series[0].outlines;
        
        // Set
        $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", outlines: ["red", "yellow", "blue"] }]);

radiusFactor

Type:: number
Default:: 0.9

Gets or sets the scaling factor of the chart's radius. Value between 0 and 1.

Code Sample

 
        // Initialize
        $("#chart").igDoughnutChart({
           series: 
              [{
                  radiusFactor: 0.6,
                  name: "Pop1990",
                  labelMemberPath: "CountryName",
                  valueMemberPath: "Pop1990",
                  dataSource: data
              }]
        });
        
        // Get
        var series = $("#chart").igDoughnutChart("option", "series");
        series[0].radiusFactor;
        
        // Set
        $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", radiusFactor: 0.6 }]);

selectedStyle

Type:: object
Default:: null

Gets or sets the style used when a slice is selected.

Code Sample

 
        // Initialize
        $("#chart").igDoughnutChart({
           series: 
              [{
                  selectedStyle: { fill: "red", stroke: "blue", strokeThickness: 3, opacity: 1 },
                  name: "Pop1990",
                  labelMemberPath: "CountryName",
                  valueMemberPath: "Pop1990",
                  dataSource: data
              }]
        });
        
        // Get
        var series = $("#chart").igDoughnutChart("option", "series");
        series[0].selectedStyle;
        
        // Set
        $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", selectedStyle: { fill: "red", stroke: "blue", strokeThickness: 3, opacity: 1 } }]);

showTooltip

Type:: bool
Default:: false

Whether the series should render a tooltip.

Code Sample

 
        // Initialize
        $("#chart").igDoughnutChart({
           series: 
              [{
                  showTooltip: true,
                  name: "Pop1990",
                  labelMemberPath: "CountryName",
                  valueMemberPath: "Pop1990",
                  dataSource: data
              }]
        });
        
        // Get
        var series = $("#chart").igDoughnutChart("option", "series");
        series[0].showTooltip;
        
        // Set
        $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", showTooltip: true }]);

startAngle

Type:: number
Default:: 0

Gets or sets the starting angle of the chart.
The default zero value is equivalent to 3 o'clock.

Code Sample

 
        // Initialize
        $("#chart").igDoughnutChart({
           series: 
              [{
                  startAngle: 90,
                  name: "Pop1990",
                  labelMemberPath: "CountryName",
                  valueMemberPath: "Pop1990",
                  dataSource: data
              }]
        });
        
        // Get
        var series = $("#chart").igDoughnutChart("option", "series");
        series[0].startAngle;
        
        // Set
        $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", startAngle: 90 }]);

tooltipTemplate

Type:: string
Default:: null

The name of template or the template itself that chart tooltip will use to render.

Code Sample

 
// Initialize
        $("#chart").igDoughnutChart({
           series: 
              [{
                  showTooltip: true,
                  tooltipTemplate: "countryTooltip",
                  name: "Pop1990",
                  labelMemberPath: "CountryName",
                  valueMemberPath: "Pop1990",
                  dataSource: data
              }]
        });
        
        // Get
        var series = $("#chart").igDoughnutChart("option", "series");
        series[0].tooltipTemplate;
        
        // Set
        $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", tooltipTemplate: "countryTooltip" }]);

type

Type:: enumeration
Default:: flat

Gets or sets the current series type.

Members

flat
Type:string
Series has flat 1-dimensional data.

Code Sample

 
        // Initialize
        $("#chart").igDoughnutChart({
           series: 
              [{
                  type: "flat",
                  name: "Pop1990",
                  labelMemberPath: "CountryName",
                  valueMemberPath: "Pop1990",
                  dataSource: data
              }]
        });
        
        // Get
        var series = $("#chart").igDoughnutChart("option", "series");
        series[0].type;
        
        // Set
        $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", type: "flat" }]);

valueMemberPath

Type:: string
Default:: null

Gets or Sets the property name that contains the values.

Code Sample

 
        // Initialize
        $("#chart").igDoughnutChart({
           series: 
              [{
                  valueMemberPath: "Pop1990",
                  name: "Pop1990",
                  labelMemberPath: "CountryName",
                  dataSource: data
              }]
        });
        
        // Get
        var series = $("#chart").igDoughnutChart("option", "series");
        series[0].valueMemberPath;
        
        // Set
        $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", valueMemberPath: "Pop1990" }]);

tooltipTemplate
Inherited

Type:: string
Default:: null

Gets sets template for tooltip associated with chart item.
Example: "Value: $(ValueMemberPathInDataSource)".

Code Sample

        // Initialize
        $("#chart").igDoughnutChart({
            tooltipTemplate: "chartTooltipTemplate"
        });
        
        // Get
        var template= $("#chart").igDoughnutChart("option", "tooltipTemplate");
        
        // Set
        $("#chart").igDoughnutChart("option", "tooltipTemplate", "chartTooltipTemplate");

width

Type:: enumeration
Default:: null

The width of the chart. It can be set as a number in pixels, string (px) or percentage (%).

Members

string
The widget width can be set in pixels (px) and percentage (%).
number
The widget width can be set as a number.

Code Sample

        // Initialize
        $("#chart").igDoughnutChart({
            width : "400px"
        });
        
        // Get
        var width = $("#chart").igDoughnutChart("option", "width");
        
        // Set
        $("#chart").igDoughnutChart("option", "width", "400px");

For more information on how to interact with the Ignite UI controls' events, refer to
Using Events in Ignite UI.

Note: Calling API methods programmatically does not raise events related to their operation unless specifically stated otherwise by the corresponding API documentation; those events are only raised by their respective user interaction.

Show Details

browserNotSupported

Cancellable:: false

Event fired when the control is displayed on a non HTML5 compliant browser.

Code Sample

 
//Bind
$(document).delegate(".selector", "igdoughnutchartbrowsernotsupported", function (evt, ui) {
    // do something
});
  
// Initialize
$(".selector").igDoughnutChart({
    browserNotSupported: function(evt, ui) {...}
});

dataBinding
Inherited

Cancellable:: true

Event which is raised before data binding.
Return false in order to cancel data binding.
Function takes first argument null and second argument ui.
Use ui.owner to obtain reference to chart widget.
Use ui.dataSource to obtain reference to instance of $.ig.DataSource.

Code Sample

 
//Delegate
$(document).delegate(".selector", "igdoughtnutchartdatabinding", function (evt, ui) {
    // Get reference to igDoughnutChart.
    ui.owner;
     
    // Get reference to instance of $.ig.DataSource.
    ui.dataSource;
});
  
//Initialize
$(".selector").igDoughnutChart({
    dataBinding: function(evt, ui) {...}
});

dataBound
Inherited

Cancellable:: false

Event which is raised after data binding.
Function takes first argument null and second argument ui.
Use ui.owner to obtain reference to chart widget.
Use ui.data to obtain reference to array actual data which is displayed by chart.
Use ui.dataSource to obtain reference to instance of $.ig.DataSource.

Code Sample

 
//Delegate
$(document).delegate(".selector", "igdoughtnutchartdatabound", function (evt, ui) {
    // Get reference to igDoughnutChart.
    ui.owner;
     
    // Get reference to igDoughnutChart's array data.
    ui.data;
     
    // Get reference to instance of $.ig.DataSource.
    ui.dataSource;
});
  
//Initialize
$(".selector").igDoughnutChart({
    dataBound: function(evt, ui) {...}
});

hideTooltip
Inherited

Cancellable:

true

Event which is raised before tooltip is hidden.
Return false in order to cancel hiding and keep tooltip visible.
Function takes first argument null and second argument ui.
Use ui.owner to obtain reference to chart widget.
Use ui.item to obtain reference to item.
Use ui.element to obtain reference to jquery object which represents tooltip or value of ui.element from last updateTooltip event. Value of that member can be replaced by custom element.
Code Sample
```
 
//Delegate
$(document).delegate(".selector", "igdoughtnutcharthidetooltip", function (evt, ui) {
    // Get reference to igDoughnutChart.
    ui.owner;
     
    // Get reference to the data object.
    ui.item;
     
    // Get or set the jQuery object representing the tooltip.
    ui.element;
});
  
//Initialize
$(".selector").igDoughnutChart({
    hideTooltip: function(evt, ui) {...}
});
```

holeDimensionsChanged

Cancellable:: false

Raised when the dimensions (center point or radius) of the doughnut hole change.

Code Sample

 
//Bind
$(document).delegate(".selector", "igdoughnutchartholedimensionschanged", function (evt, ui) {
    //Get the center of the hole.
    ui.center;
            
    // Get the options object of the doughnut chart.
    ui.doughnut;
            
    // Get the radius.
    ui.radius;
});

// Initialize
$(".selector").igDoughnutChart({
    holeDimensionsChanged: function(evt, ui) {...}
});

sliceClick

Cancellable:: false

Raised when the slice is clicked.

Code Sample

 
//Bind
$(document).delegate(".selector", "igdoughnutchartsliceclick", function (evt, ui) {
    // Get the options object of the doughnut chart.
    ui.doughnut;

    // Get an object containing information about the clicked slice.
    ui.slice;
});
  
// Initialize
$(".selector").igDoughnutChart({
    sliceClick: function(evt, ui) {...}
});

tooltipHidden

Cancellable:: false

Event fired after a tooltip is hidden
Function takes arguments evt and ui.
Use ui.element to get reference to tooltip DOM element.
Use ui.item to get reference to current series item object.
Use ui.chart to get reference to chart object.
Use ui.series to get reference to current series object.
Use ui.actualItemBrush to get item brush.
Use ui.actualSeriesBrush to get series brush.

Code Sample

 
//Bind
$(document).delegate(".selector", "igdoughnutcharttooltiphidden", function (evt, ui) {
    // Get the options object of the doughnut chart.
    ui.doughnut;

    // Get the jQuery object containing the tooltip.
    ui.element;
    
    // Get the datasource item displayed in the tooltip.
    ui.item;
    
    // Get the current series.
    ui.series;
});
  
// Initialize
$(".selector").igDoughnutChart({
    tooltipHidden: function(evt, ui) {...}
});

tooltipHiding

Cancellable:: true

Event fired when the mouse has left a series and the tooltip is about to hide
Function takes arguments evt and ui.
Use ui.element to get reference to tooltip DOM element.
Use ui.item to get reference to current series item object.
Use ui.chart to get reference to chart object.
Use ui.series to get reference to current series object.
Use ui.actualItemBrush to get item brush.
Use ui.actualSeriesBrush to get series brush.

Code Sample

 
//Bind
$(document).delegate(".selector", "igdoughnutcharttooltiphiding", function (evt, ui) {
    // Get the options object of the doughnut chart.
    ui.doughnut;

    // Get the jQuery object containing the tooltip.
    ui.element;
    
    // Get the datasource item displayed in the tooltip.
    ui.item;
    
    // Get the current series.
    ui.series;
});
  
// Initialize
$(".selector").igDoughnutChart({
    tooltipHiding: function(evt, ui) {...}
});

tooltipShowing

Cancellable:: true

Event fired when the mouse has hovered on a series and the tooltip is about to show
Function takes arguments evt and ui.
Use ui.element to get reference to tooltip DOM element.
Use ui.item to get reference to current series item object.
Use ui.chart to get reference to chart object.
Use ui.series to get reference to current series object.
Use ui.actualItemBrush to get item brush.
Use ui.actualSeriesBrush to get series brush.

Code Sample

 
//Bind
$(document).delegate(".selector", "igdoughnutcharttooltipshowing", function (evt, ui) {
    // Get the options object of the doughnut chart.
    ui.doughnut;

    // Get the jQuery object containing the tooltip.
    ui.element;
    
    // Get the datasource item displayed in the tooltip.
    ui.item;
    
    // Get the current series.
    ui.series;
});
  
// Initialize
$(".selector").igDoughnutChart({
    tooltipShowing: function(evt, ui) {...}
});

tooltipShown

Cancellable:: false

Event fired after a tooltip is shown
Function takes arguments evt and ui.
Use ui.element to get reference to tooltip DOM element.
Use ui.item to get reference to current series item object.
Use ui.chart to get reference to chart object.
Use ui.series to get reference to current series object.
Use ui.actualItemBrush to get item brush.
Use ui.actualSeriesBrush to get series brush.

Code Sample

 
//Bind
$(document).delegate(".selector", "igdoughnutcharttooltipshown", function (evt, ui) {
    // Get the options object of the doughnut chart.
    ui.doughnut;

    // Get the jQuery object containing the tooltip.
    ui.element;
    
    // Get the datasource item displayed in the tooltip.
    ui.item;
    
    // Get the current series.
    ui.series;
});
  
// Initialize
$(".selector").igDoughnutChart({
    tooltipShown: function(evt, ui) {...}
});

updateTooltip
Inherited

Cancellable:

true

Event which is raised before tooltip is updated.
Return false in order to cancel updating and hide tooltip.
Function takes first argument null and second argument ui.
Use ui.owner to obtain reference to chart widget.
Use ui.text to obtain html of tooltip. Value of that member can be modified. If modified value is null or empty string, then current content of tooltip keeps old value.
Use ui.item to obtain reference to item. Value of that member can be modified or replaced by custom item.
Use ui.x to obtain left position of tooltip in pixels relative to widget. Value of that member can be modified.
Use ui.y to obtain top position of tooltip in pixels relative to widget. Value of that member can be modified.
Use ui.element to obtain reference to jquery object which represents tooltip. Value of that member can be replaced by custom element.
Code Sample
```
 
//Delegate
$(document).delegate(".selector", "igdoughnutchartupdatetooltip", function (evt, ui) {
    // Get reference to igDoughnutChart.
    ui.owner;
     
    // Get or set the tooltip HTML.
    ui.text;
     
    // Get reference to the data object.
    ui.item;
     
    // Get or set the tooltip's left position relative to the widget in pixels.
    ui.x;
     
    // Get or set the tooltip's top position relative to the widget in pixels.
    ui.y;
     
    // Get or set the jQuery object representing the tooltip.
    ui.element;
});
  
//Initialize
$(".selector").igDoughnutChart({
    updateTooltip: function(evt, ui) {...}
});
```

Show Details

addItem
Inherited

.igDoughnutChart( "addItem", item:object );

Return Type:

object

Return Type Description:

Returns a reference to this chart.
Adds a new item to the data source and notifies the chart.
- item
- Type:object
- The item that we want to add to the data source.
Code Sample
```
 $(".selector").igDoughnutChart("addItem", dataItem); 
```

addSeries

.igDoughnutChart( "addSeries", seriesObj:object );

Adds a new series to the doughnut chart.

seriesObj
Type:object
The series object to be added.

Code Sample

 
        $("#chart").igDoughnutChart("addSeries", {name: "series2", labelMemberPath: "Pop2008", valueMemberPath: "Pop2008", dataSource: data});

chart
Inherited

.igDoughnutChart( "chart" );

Return Type:

object

Return Type Description:

Returns reference to chart.
Get reference to chart object.
Code Sample
```
 
// Not intended for use with derived widget       
var chart = $(".selector").igDoughnutChart("chart");
 
```
dataBind
Inherited

.igDoughnutChart( "dataBind" );
Binds data to the chart.
Code Sample
```
 
      $("#chart").igDoughnutChart("dataBind");
      
```

destroy

.igDoughnutChart( "destroy" );

Destroys the widget.

Code Sample

 
        $("#chart").igDoughnutChart("destroy");

exportVisualData

.igDoughnutChart( "exportVisualData" );

Return Type:

object

Return Type Description:

a JavaScript object containing the visual data.
Returns information about how the doughnut chart is rendered.
Code Sample
```
 
      var visualData = $("#chart").igDoughnutChart("exportVisualData");
      
```
findIndexOfItem
Inherited

.igDoughnutChart( "findIndexOfItem", item:object );

Return Type:

number

Return Type Description:

Returns -1 or index of item.
Find index of item within actual data used by chart.
- item
- Type:object
- The reference to item.
Code Sample
```
 var index = $(".selector").igDoughnutChart("findIndexOfItem", item); 
```
flush

.igDoughnutChart( "flush" );
Causes all of the series that have pending changes e.g. by changed property values to be rendered immediately.
Code Sample
```
 
      $("#chart").igDoughnutChart("flush");
      
```
getCenterCoordinates

.igDoughnutChart( "getCenterCoordinates" );

Return Type:

object

Return Type Description:

a JavaScript object specifying x and y coordinates of the point.
Returns the center of the doughnut chart.
Code Sample
```
 
      var point = $("#chart").igDoughnutChart("getCenterCoordinates");
      // returns the x coordinate of the center
      point.x
      // returns the y coordinate of the center
      point.y
      
```
getData

.igDoughnutChart( "getData", series:string );

Return Type:

object

Return Type Description:

Data source for the specified series or array of all series sources if the parameter is omitted.
Returns data source of the series.
- series
- Type:string
- Optional. The series name. If not provided an array of series data sources is returned.
Code Sample
```
 var data = $(".selector").igDoughnutChart("getData"); 
```
getDataItem
Inherited

.igDoughnutChart( "getDataItem", index:object );

Return Type:

object

Return Type Description:

Returns null or reference to data item.
Get item within actual data used by chart. That is similar to this.getData()[ index ].
- index
- Type:object
- Index of data item.
Code Sample
```
 var item = $(".selector").igDoughnutChart("getDataItem", 0); 
```
getHoleRadius

.igDoughnutChart( "getHoleRadius" );

Return Type:

number
Returns the radius of the chart's hole.
Code Sample
```
 
        var radius = $("#chart").igDoughnutChart("getHoleRadius");
      
```
insertItem
Inherited

.igDoughnutChart( "insertItem", item:object, index:number );

Return Type:

object

Return Type Description:

Returns a reference to this chart.
Inserts a new item to the data source and notifies the chart.
- item
- Type:object
- the new item that we want to insert in the data source.
- index
- Type:number
- The index in the data source where the new item will be inserted.
Code Sample
```
 var chart = $(".selector").igDoughnutChart("insertItem", item, 9); 
```
notifyClearItems
Inherited

.igDoughnutChart( "notifyClearItems", dataSource:object );

Return Type:

object

Return Type Description:

Returns a reference to this chart.
Notifies the chart that the items have been cleared from an associated data source.
It's not necessary to notify more than one target of a change if they share the same items source.
- dataSource
- Type:object
- The data source in which the change happened.
Code Sample
```
 var chart = $(".selector").igDoughnutChart("notifyClearItems", dataSource); 
```
notifyInsertItem
Inherited

.igDoughnutChart( "notifyInsertItem", dataSource:object, index:number, newItem:object );

Return Type:

object

Return Type Description:

Returns a reference to this chart.
Notifies the target axis or series that an item has been inserted at the specified index in its data source.
It's not necessary to notify more than one target of a change if they share the same items source.
- dataSource
- Type:object
- The data source in which the change happened.
- index
- Type:number
- The index in the items source where the new item has been inserted.
- newItem
- Type:object
- the new item that has been set in the collection.
Code Sample
```
 var chart = $(".selector").igDoughnutChart("notifyInsertItem", dataSource, 9, newItem); 
```
notifyRemoveItem
Inherited

.igDoughnutChart( "notifyRemoveItem", dataSource:object, index:number, oldItem:object );

Return Type:

object

Return Type Description:

Returns a reference to this chart.
Notifies the target axis or series that an item has been removed from the specified index in its data source.
It's not necessary to notify more than one target of a change if they share the same items source.
- dataSource
- Type:object
- The data source in which the change happened.
- index
- Type:number
- The index in the items source from where the old item has been removed.
- oldItem
- Type:object
- the old item that has been removed from the collection.
Code Sample
```
 var chart = $(".selector").igDoughnutChart("notifyRemoveItem", dataSource, 0, oldItem); 
```
notifySetItem
Inherited

.igDoughnutChart( "notifySetItem", dataSource:object, index:number, newItem:object, oldItem:object );

Return Type:

object

Return Type Description:

Returns a reference to this chart.
Notifies the chart that an item has been set in an associated data source.
- dataSource
- Type:object
- The data source in which the change happened.
- index
- Type:number
- The index in the items source that has been changed.
- newItem
- Type:object
- the new item that has been set in the collection.
- oldItem
- Type:object
- the old item that has been overwritten in the collection.
Code Sample
```
 var chart = $(".selector").igDoughnutChart("notifySetItem", dataSource, 0, newItem, oldItem); 
```
removeItem
Inherited

.igDoughnutChart( "removeItem", index:number );

Return Type:

object

Return Type Description:

Returns a reference to this chart.
Deletes an item from the data source and notifies the chart.
- index
- Type:number
- The index in the data source from where the item will be been removed.
Code Sample
```
 var chart = $(".selector").igDoughnutChart("removeItem", 0); 
```
removeSeries

.igDoughnutChart( "removeSeries", seriesObj:object );
Removes the specified series from the doughnut chart.
- seriesObj
- Type:object
- The series object identifying the series to be removed.
Code Sample
```
 
        $("#chart").igDoughnutChart("removeSeries", {name: "series2"});
      
```
setItem
Inherited

.igDoughnutChart( "setItem", index:number, item:object );

Return Type:

object

Return Type Description:

Returns a reference to this chart.
Updates an item in the data source and notifies the chart.
- index
- Type:number
- The index of the item in the data source that we want to change.
- item
- Type:object
- The new item object that will be set in the data source.
Code Sample
```
 var chart = $(".selector").igDoughnutChart("setItem", 0, item); 
```
updateSeries

.igDoughnutChart( "updateSeries", value:object );
Updates the series with the specified name with the specified new property values.
- value
- Type:object
- The series object identifying the series to be updated.
Code Sample
```
 
      $("#chart").igDoughnutChart("updateSeries", {name: "series1", labelMemberPath: "Pop2008", valueMemberPath: "Pop2008"});
      
```

ui-doughnut ui-corner-all ui-widget-content

Get the class applied to main element: ui-doughnut ui-corner-all ui-widget-content.
ui-doughnut-tooltip ui-widget-content ui-corner-all

Get the class applied to the tooltip element: ui-doughnut-tooltip ui-widget-content ui-corner-all.
ui-html5-non-html5-supported-message ui-helper-clearfix ui-html5-non-html5

Get the class applied to main element, shown when the chart is opened in a non HTML5 compatible browser.

Ignite UI | Samples

ui.igDoughnutChart

Code Sample

Related Samples

Related Topics

Dependencies

Inherits

allowSliceExplosion

Code Sample

allowSliceSelection

Code Sample

dataSourceInherited

Code Sample

dataSourceTypeInherited

Code Sample

dataSourceUrlInherited

Code Sample

height

Members

Code Sample

innerExtent

Code Sample

isSurfaceInteractionDisabled

Code Sample

maxRecCountInherited

Code Sample

pixelScalingRatio

responseDataKeyInherited

Code Sample

responseTotalRecCountKeyInherited

Code Sample

selectedStyle

Code Sample

series

Code Sample

brushes

Code Sample

formatLabel

Code Sample

formatLegendLabel

Code Sample

isSurfaceInteractionDisabled

Code Sample

itemsSource

Code Sample

labelExtent

Code Sample

labelFormat

labelFormatSpecifiers

labelInnerColor

labelMemberPath

Code Sample

labelOuterColor

labelsPosition

Members

Code Sample

leaderLineMargin

Code Sample

leaderLineStyle

Code Sample

leaderLineType

Members

Code Sample

leaderLineVisibility

Members

Code Sample

legend

Code Sample

legendLabelFormat

legendLabelFormatSpecifiers

legendLabelMemberPath

Code Sample

legendOthersLabelFormat

legendOthersLabelFormatSpecifiers

othersCategoryText

Code Sample

othersCategoryThreshold

Code Sample

othersCategoryType

Members

dataSource
Inherited

dataSourceType
Inherited

dataSourceUrl
Inherited

maxRecCount
Inherited

responseDataKey
Inherited

responseTotalRecCountKey
Inherited

tooltipTemplate
Inherited

dataBinding
Inherited

dataBound
Inherited

hideTooltip
Inherited

updateTooltip
Inherited

addItem
Inherited

chart
Inherited

dataBind
Inherited

findIndexOfItem
Inherited

getDataItem
Inherited