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://jp.igniteui.com/js/angular.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://cdn-na.infragistics.com/igniteui/latest/js/extensions/igniteui-angularjs.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 ng-app="sampleApp" ng-controller="dataChartController">
        <ig-data-chart id="datachart1" data-source="dataChart">
            <axes>
                <axis name="NameAxis" type="categoryX" title="国" label="CountryName"></axis>

                <axis name="PopulationAxis" type="numericY" minimumvalue="0" title="人口 (百万人単位)"></axis>
            </axes>
            <series>
                <series name="2015Population" type="column" is-highlighting-enabled="true" is-transition-in-enabled="true" x-axis="NameAxis" y-axis="PopulationAxis" value-member-path="Pop2015">
                </series>
            </series>
        </ig-data-chart>
        <ig-zoombar id="zoombar1" target="#datachart1"></ig-zoombar>
    </div>

JavaScript

$(function () {
var sampleApp = angular.module('sampleApp', ['igniteui-directives']);
        sampleApp.controller('dataChartController', function ($scope) {
            $scope.dataChart = [
		        { "CountryName": "中国", "Pop1995": 1216, "Pop2005": 1297, "Pop2015": 1361, "Pop2025": 1394 },
		        { "CountryName": "インド", "Pop1995": 920, "Pop2005": 1090, "Pop2015": 1251, "Pop2025": 1396 },
		        { "CountryName": "米国", "Pop1995": 266, "Pop2005": 295, "Pop2015": 322, "Pop2025": 351 },
		        { "CountryName": "インドネシア", "Pop1995": 197, "Pop2005": 229, "Pop2015": 256, "Pop2025": 277 },
		        { "CountryName": "ブラジル", "Pop1995": 161, "Pop2005": 186, "Pop2015": 204, "Pop2025": 218 }
            ];
        });
});