JSFiddle - React, Tailwind, and code Playground

by damyanpetev

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 generateCategoryXChart(chartType) {

                var selector = "#" + chartType;
                var isColumnChart = chartType.contains("Column");

                $(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: "categoryX",
                        label: "Year",
                        title: "Year",
                        gap: 1,
                    },
                        {
                            name: "Volume",
                            type: "numericY",
                            title: "Quadrillion Btu"
                        }],
                    series: [function () { // a self executing function to create the series initialization object
                        var seriesObj = {
                            name: "parent",
                            xAxis: "Year",
                            yAxis: "Volume",
                            type: chartType,
                            outline: "transparent",
                            
                            
                        isTransitionInEnabled: true,
                        isHighlightingEnabled: true,
                            
                            
                            
                            series: [{
                                name: "China",
                                title: "China",
                                type: "stackedFragment",
                                showTooltip: true,
                                isTransitionInEnabled: true,
                                tooltipTemplate: "China",
                                valueMemberPath: "China"
             ...