JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

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

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

JavaScript

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