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>
<script src="https://jp.igniteui.com/js-data/world-energy-production"></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>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/modules/infragistics.ui.chart.css" rel="stylesheet"></link>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/i18n/infragistics-ja.js"></script>

<script id="tooltipTemplate" type="text/x-jquery-tmpl">
        <div style="color: #44ACD6">
            <span>アメリカ </span><span>${item.Year}</span><br />
            総エネルギー: <span style="font-weight: bold">${item.UnitedStates}</span>
        </div>
    </script>

<div id="chart"></div>
    <div class="EIAdata-attribution">
        エネルギーのデータ ソース:<br />
        <a href="http://www.eia.gov/" target="_blank">U.S. Energy Information Administration (2012)</a>
    </div>

JavaScript

$(function () {
            $("#chart").igDataChart({
                dataSource: everyThreeYears,
                height: "400px",
                width: "100%",
                title: "国別エネルギー生産量",
                subtitle: "総一次エネルギー生産国トップ 5 ",
                axes: [{
                    name: "Year",
                    type: "categoryX",
                    label: "Year",
                    title: "年",
                    gap: 0.8,
                }, {
                    name: "Volume",
                    type: "numericY",
                    title: "生産されたエネルギー (BTU 40 億単位)"
                }],
                series: [{
                    // showTooltip: true enables the default tooltips
                    showTooltip: true,
                    // if a custom tooltipTemplate is set,
                    // the default tooltip will not be shown
                    tooltipTemplate: "tooltipTemplate",
                    name: "United States",
                    title: "アメリカ",
                    type: "column",
                    valueMemberPath: "UnitedStates",
                    xAxis: "Year",
                    yAxis: "Volume",
                    thickness: .01
                },
                {
                    showTooltip: true,
                    name: "China",
                    title: "中国",
                    type: "column",
                    valueMemberPath: "China",
                    xAxis: "Year",
                    yAxis: "Volume",
                    thickness: .01
                },
                {
                    showTooltip: true,
                    name: "Russia",
                    title: "ロシア",
                    type: "column",
                    valueMemberPath: "Russia",
                    xAxis: "Year",
                    yAxis: "Volume",
                    thickness: .01
                }, {
                    showTooltip: true,
                    name: "Saudi Arabia",
                    title:...