Ignite UI API Reference

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:: null

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:: null

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);

&nbspdataSource

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.
&nbspdataSourceType

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.
&nbspdataSourceUrl

Type:

string

Default:

null

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

Type:

number

Default:

null

The height of the chart.

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);

&nbspmaxRecCount

Type:

number

Default:

null

Gets sets maximum number of displayed records in chart.
&nbspresponseDataKey

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.
&nbspresponseTotalRecCountKey

Type:

string

Default:

null

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

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 Brushes property.
The brushes property defines the palette from which automatically assigned slice brushes are selected.
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(); } }]);

isSurfaceInteractionDisabled

Type:: bool
Default:: null

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

 
        // Initialize
        $("#chart").igDoughnutChart({
           series: 
              [{
                  itemsSource: [
                { "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 }
              ],
                  name: "Pop1990",
                  labelMemberPath: "CountryName",
                  valueMemberPath: "Pop1990"
              }]
        });
        
        // Get
        var series = $("#chart").igDoughnutChart("option", "series");
        series[0].itemsSource;
        
        // Set
        $("#chart").igDoughnutChart("option", "series", [{ name: "Pop1990", itemsSource: [
                { "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 }]}]);

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 }]);

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" }]);

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.

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
.
collapsed
Type:string

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") }]);

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", }]);

outlines

Type:: object
Default:: null

Gets or sets the Outlines property.
The Outlines property defines the palette from which automatically assigned slice outlines are selected.
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.

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.
type

Type:

enumeration

Default:

flat
Gets or sets the current series type.
Members
- flat
- Type:string
- Series has flat 1-dimensional data.

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" }]);

&nbsptooltipTemplate

Type:

string

Default:

null

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

Type:

number

Default:

null

The width of the chart.

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) {...}
});

&nbspdataBinding

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.
&nbspdataBound

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.
&nbsphideTooltip

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.

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) {...}
});

&nbspupdateTooltip

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.

Show Details

&nbspaddItem

.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.

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});

&nbspchart

.igDoughnutChart( "chart" );

Return Type:

object

Return Type Description:

Returns reference to chart.
Get reference to chart object.
&nbspdataBind

.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");
      
```
&nbspfindIndexOfItem

.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.
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
      
```
&nbspgetData

.igDoughnutChart( "getData" );

Return Type:

array

Return Type Description:

Returns null or reference to data.
Get reference of actual data used by chart.
&nbspgetDataItem

.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.
getHoleRadius

.igDoughnutChart( "getHoleRadius" );

Return Type:

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

.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.
&nbspnotifyClearItems

.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.
&nbspnotifyInsertItem

.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.
&nbspnotifyRemoveItem

.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.
&nbspnotifySetItem

.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.
&nbspremoveItem

.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.
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"});
      
```
&nbspsetItem

.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.
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 Home

Ignite UI API Reference

ui.igDoughnutChart

Code Sample

Related Samples

Related Topics

Dependencies

Inherits

allowSliceExplosion

Code Sample

allowSliceSelection

Code Sample

&nbspdataSource

&nbspdataSourceType

&nbspdataSourceUrl

&nbspheight

innerExtent

Code Sample

isSurfaceInteractionDisabled

Code Sample

&nbspmaxRecCount

&nbspresponseDataKey

&nbspresponseTotalRecCountKey

selectedStyle

Code Sample

series

Code Sample

brushes

Code Sample

formatLabel

Code Sample

isSurfaceInteractionDisabled

Code Sample

itemsSource

Code Sample

labelExtent

Code Sample

labelMemberPath

Code Sample

labelsPosition

Members

Code Sample

leaderLineMargin

Code Sample

leaderLineStyle

leaderLineType

Members

Code Sample

leaderLineVisibility

Members

Code Sample

legend

Code Sample

othersCategoryText

Code Sample

othersCategoryThreshold

Code Sample

othersCategoryType

Members

Code Sample

outlines

Code Sample

radiusFactor

Code Sample

selectedStyle

Code Sample

showTooltip

startAngle

Code Sample

tooltipTemplate

type

Members

valueMemberPath

Code Sample

&nbsptooltipTemplate

&nbspwidth

browserNotSupported

Code Sample

&nbspdataBinding

&nbspdataBound