JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://jp.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>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/i18n/infragistics-ja.js"></script>

<div style="float: left; width: 70%;">
        <div style="text-align: center; width: 100%; font: 16px Arial, Helvetica, sans-serif;">人口が多い国トップ 5</div>
        <div style="text-align: center; width: 100%; margin: 10px 0; font: 12px Arial, Helvetica, sans-serif;">1990 年 (内部リング) vs. 2008 年 (外部リング)*</div>

        
        <div id="chart"></div>

        <div style="margin: 10px 0; font: 12px Arial, Helvetica, sans-serif;">*人口は 100 万単位です</div>
    </div>
    <div id="legend" style="float: left"></div>

JavaScript

$(function () {

            var data = [
                { "CountryName": "中国", "Pop1990": 1141, "Pop2008": 1333, "Pop2025": 1458 },
                { "CountryName": "インド", "Pop1990": 849, "Pop2008": 1140, "Pop2025": 1398 },
                { "CountryName": "米国", "Pop1990": 250, "Pop2008": 304, "Pop2025": 352 },
                { "CountryName": "インドネシア", "Pop1990": 178, "Pop2008": 228, "Pop2025": 273 },
                { "CountryName": "ブラジル", "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...