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/us-fao-gross-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>

<div>
        <div class="chartContainer">
            <h4>年の米国農業生産</h4>
            <div> 
                <div class="chart" id="chartScatterPoint"></div> 
                <div class="chart" id="chartScatterBubble"></div>
                <div class="chart" id="chartScatterLine"></div> 
                <div class="chart" id="chartScatterSpline"></div> 
            </div>
        </div>

        <div class="UNdata-attribution">
            農業のデータ ソース:<br />
            <a href="http://data.un.org/" target="_blank">UNdata</a>
        </div>

    </div>

CSS

h4 {
            width: 100%;
            text-align: center;
        }

        .chart { 
            display: inline-block; 
        }

JavaScript

$(function () {
            function CreateSeries(seriesType) { 

                var markerType = "none"; 
                if (seriesType == "scatterPoint" || seriesType == "scatterBubble") {
                    markerType = "circle";
                }

                var series = {
                    name: seriesType + "Series",
                    type: seriesType,
                    xAxis: "xAxis",
                    yAxis: "yAxis",
                    xMemberPath: "Year",
                    yMemberPath: "Value",
                    markerType: markerType,
                    thickness: 2
                };

                // scatter bubble series requires additional settings:
                if (seriesType == "scatterBubble") { 
                    series.radiusMemberPath = "Population";
                    series.fillMemberPath = "Population";
                    series.labelMemberPath = "Population"; 
                    series.radiusScale = {
                        minimumValue: 5,
                        maximumValue: 30,
                        isLogarithmic: false
                    };
                    series.fillScale = {
                        type: "value",
                        brushes: ["#DFB4FC", "#D092FA", "#7604C3"],
                        minimumValue: 150,
                        maximumValue: 400
                    };
                }

                return series;
            }

            function CreateChart(selector, seriesType, title) {
                $(selector).igDataChart({
                    width: "250px",
                    height: "250px",
                    title: title, 
                    horizontalZoomable: true,
                    verticalZoomable: true,
                    windowResponse: "immediate",
                    dataSource: agriculturalData,
                    axes: [{
                        name: "xAxis",
                        type: "numericX",
                        interval: 10,
   ...