Available in the Full Version

Doughnut Chart - Overview

The igDoughnutChart displays data similar to a pie chart and can display multiple sets of data around a common center. You can create a legend for the igDoughnutChart and also define categories, labels, and tooltips.
1990 Population
Top 5 largest countries by population (in millions)

This sample is designed for a larger screen size.

On mobile, try rotating your screen, view full size, or email to another device.

This is a basic example of the doughnut chart bound to JSON data.

Code View

Copy to Clipboard
var data = [
    { "CountryName": "China", "Pop1990": 1141 },
    { "CountryName": "India", "Pop1990": 849 },
    { "CountryName": "United States", "Pop1990": 250 },
    { "CountryName": "Indonesia", "Pop1990": 178 },
    { "CountryName": "Brazil", "Pop1990": 150 }
];

$("#chart").igDoughnutChart({
    width: "100%",
    height: "550px",
    series:
    [{
        name: "Pop1990",
        labelMemberPath: "CountryName",
        valueMemberPath: "Pop1990",
        dataSource: data,
        labelsPosition: "bestFit",
        formatLabel: function (context) {
            return context.itemLabel + " (" + context.item.Pop1990 + ")";
        }
    }]
});