Available in the Full Version
Doughnut Chart - Configure Legend
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
Top 5 Most Populated Countries
1990 (inner ring) vs 2008 (outer ring)*
*Population measured 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 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/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.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/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.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>