JSFiddle - React, Tailwind, and code Playground

HTML

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

<div class="chart">
        <h2 align="center">Stacked Bar</h2>
        <div id="stackedBar"></div>
    </div>
    <div class="chart">
        <h2 align="center">Stacked 100 Bar</h2>
        <div id="stacked100Bar"></div>
    </div>
    <div class="chart">
        <h2 align="center">Stacked Area</h2>
        <div id="stackedArea"></div>
    </div>
    <div class="chart">
        <h2 align="center">Stacked Column</h2>
        <div id="stackedColumn"></div>
    </div>
    <div class="chart">
        <h2 align="center">Stacked Line</h2>
        <div id="stackedLine"></div>
    </div>
    <div class="chart">
        <h2 align="center">Stacked Spline</h2>
        <div id="stackedSpline"></div>
    </div>
    <div class="chart">
        <h2 align="center">Stacked Spline Area</h2>
        <div id="stackedSplineArea"></div>
    </div>
    <div class="chart">
        <h2 align="center">Stacked 100 Area</h2>
        <div id="stacked100Area"></div>
    </div>
    <div class="chart">
        <h2 align="center">Stacked 100 Column</h2>
        <div id="stacked100Column"></div>
    </div>
    <div class="chart">
        <h2...

CSS

.chart {
            display: inline-block;
            margin: 0 10px 10px 0;
        }

            .chart h4 {
                margin-bottom: 5px;
            }

JavaScript

$(function () {
            function generateCategoryYChart(chartType) {

                var selector = "#" + chartType;
                $(selector).igDataChart({
                    dataSource: lastFiveYears,
                    height: "400px",
                    width: "400px",
                    title: "Energy Production Per Country",
                    subtitle: "The top five Total Primary Energy producers",
                    axes: [{
                        name: "Year",
                        type: "categoryY",
                        label: "Year",
                        title: "Year",
                        gap: 1,
                        labelMargin: 0
                    }, {
                        name: "Volume",
                        type: "numericX",
                        title: "Quadrillion Btu"
                    }],
                    series: [{
                        name: "parent",
                        type: chartType,
                        xAxis: "Volume",
                        yAxis: "Year",
                        outline: "transparent",
                        radius: 0,
                        series: [{
                            name: "China",
                            title: "China",
                            type: "stackedFragment",
                            showTooltip: true,
                            tooltipTemplate: "China",
                            valueMemberPath: "China"
                        }, {
                            name: "United States",
                            title: "United States",
                            type: "stackedFragment",
                            showTooltip: true,
                            tooltipTemplate: "United States",
                            valueMemberPath: "UnitedStates"
                        }, {
                            name: "Russia",
                            title: "Russia",
                            showTooltip: true,
              ...