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/jquery/20132/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/jquery/20132/latest/js/infragistics.dv.js"></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>
<div style="width: 80%; min-width: 210px;">
    <div id="chart"></div>
</div>
<div class="USCensus-attribution">Population data from:
    <br /> <a href="http://www.census.gov/" target="_blank">U.S. Census Bureau</a>

</div>
<button id="printChart">Print Chart</button>

JavaScript

$(function () {
    var data = [{
        "CountryName": "China",
        "Pop1995": 1216,
        "Pop2005": 1297,
        "Pop2015": 1361,
        "Pop2025": 1394
    }, {
        "CountryName": "India",
        "Pop1995": 920,
        "Pop2005": 1090,
        "Pop2015": 1251,
        "Pop2025": 1396
    }, {
        "CountryName": "United States",
        "Pop1995": 266,
        "Pop2005": 295,
        "Pop2015": 322,
        "Pop2025": 351
    }, {
        "CountryName": "Indonesia",
        "Pop1995": 197,
        "Pop2005": 229,
        "Pop2015": 256,
        "Pop2025": 277
    }, {
        "CountryName": "Brazil",
        "Pop1995": 161,
        "Pop2005": 186,
        "Pop2015": 204,
        "Pop2025": 218
    }];

    $("#chart").igDataChart({
        width: "100%",
        height: "400px",
        title: "Population per Country",
        subtitle: "Five largest projected populations for 2015",
        dataSource: data,
        horizontalZoomable: true,
        verticalZoomable: true,
        axes: [{
            name: "NameAxis",
            type: "categoryX",
            title: "Country",
            label: "CountryName"
        }, {
            name: "PopulationAxis",
            type: "numericY",
            minimumValue: 0,
            title: "Millions of People"
        }],
        series: [{
            name: "2015Population",
            type: "column",
            isHighlightingEnabled: true,
            isTransitionInEnabled: true,
            xAxis: "NameAxis",
            yAxis: "PopulationAxis",
            valueMemberPath: "Pop2015"
        }]
        });

    var printPending = false;
    $("#printChart").on("click", function () {
        var wRect = $("#chart").igDataChart("option", "windowRect") || {
            top: 0,
            left: 0,
            width: 1,
            height: 1
        };
        wRect.width *= 0.8;
        wRect.height *= 0.8;
        wRect.top += 0.2;
        wRect.left += 0.2;
       ...