JSFiddle - React, Tailwind, and code Playground

by KendoDev

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/jquery/20132/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/jquery/20132/latest/js/infragistics.dv.js"></script>
<script src="http://igniteui.com/js-data/world-energy-production"></script>
<link href="http://cdn-na.infragistics.com/jquery/20132/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/jquery/20132/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<link href="http://cdn-na.infragistics.com/jquery/20132/latest/css/structure/modules/infragistics.ui.chart.new.css" rel="stylesheet"></link>

<!-- Include Kendo Chart Scripts/CSS -->
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css">
     <link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.default.min.css">           
         <script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>
         

   
<div class="Ignitechart">
        <h2 align="center">Ignite UI Stacked Bar Chart Zoom</h2>
        <div id="IgniteUIStackedBar"></div>
  </div> <br/><br/>        
         
         <div class="Kendochart">
        <h2 align="center">Kendo UI Stacked Bar Chart Zoom</h2>
        <div id="KendoUIStackedBar"></div>
  </div>
   
    </div>

JavaScript

$(function () {
    var data = [{
        "Year": 2005,
        "Canada": 19,
        "SaudiArabia": 1,
        "Russia": 51,
        "UnitedStates": 2,
        "China": 63,        
    },{
        "Year": 2006,
        "Canada": 19,
        "SaudiArabia": 24,
        "Russia": 52,
        "UnitedStates": 70,
        "China": 68,    
    }];
            // Ignite UI Chart creation function 
            function generateIgniteStackedBarChart(chartType) {
                var selector = "#IgniteUIStackedBar";
                $(selector).igDataChart({
                    dataSource: data,
                    height: "200px",
                    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,                            
                            valueMemberPath: "China",                            
                        }, {
                            name: "United States",
                            title: "United States",
                 ...