Available in the Full Version

Doughnut Chart - Configure Legend

Top 5 Most Populated Countries
1990 (inner ring) vs 2008 (outer ring)*
*Population measured in millions
China
India
United States
Indonesia
Brazil

This sample is designed for a larger screen size.

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

This sample shows how to configure the doughnut chart's legend.

Code View

Copy to Clipboard
<!DOCTYPE html>
<html>
<head>
    <title></title>

    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.dv.js"></script>


</head>
<body>
    <div style="float: left; width: 70%;">
        <div style="text-align: center; width: 100%; font: 16px Arial, Helvetica, sans-serif;">Top 5 Most Populated Countries</div>
        <div style="text-align: center; width: 100%; margin: 10px 0; font: 12px Arial, Helvetica, sans-serif;">1990 (inner ring) vs 2008 (outer ring)*</div>

        <!-- Target element for the igDoughnutChart -->
        <div id="chart"></div>

        <div style="margin: 10px 0; font: 12px Arial, Helvetica, sans-serif;">*Population measured in millions</div>
    </div>
    <div id="legend" style="float: left"></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: "100%",
                height: "550px",
                innerExtent: 20,
                series:
                [
                    {
                        name: "Pop1990",
                        labelMemberPath: "Pop1990",
                        valueMemberPath: "Pop1990",
                        dataSource: data,
                        formatLabel: function (context) {
                            return "(" + context.itemLabel + ")";
                        }
                    },
                    {
                        name: "Pop2008",
                        labelMemberPath: "CountryName",
                        valueMemberPath: "Pop2008",
                        dataSource: data,
                        legend: { element: "legend" },
                        formatLabel: function (context) {
                            return context.itemLabel + " (" + context.item.Pop2008 + ")";
                        }
                    }
                ],
                // the legend items get refreshed every time the doughnut is re-rendered
                // use this event to update the legend items labels
                holeDimensionsChanged: function () {
                    updateLegendItems();
                }
            });

            // the legend items have the value associated with the specific series in parentheses ()
            // remove this text making the legend applicable for both series
            function updateLegendItems() {
                $(".ui-chart-legend-item-text > span").each(function () {
                    var txt = $(this).text(),
                    idx = txt.lastIndexOf("(");
                    if (idx != -1) {
                        $(this).text(txt.substr(0, idx));
                    } else {
                        return false;
                    }
                });
            }

            updateLegendItems();
        });
    </script>

</body>
</html>