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>
<link rel="stylesheet" href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css">
<link rel="stylesheet" href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css">
<link rel="stylesheet" href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/modules/infragistics.ui.chart.css">
<a id="dl1" target="_blank">Download</a>

<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>

JavaScript

setTimeout(function () {
    var c = $("#chart canvas"); //get handle to all canvas
    var ctx = c[c.length - 1].getContext('2d');
    for (i = 0; i < c.length - 1; i++) { //add all canvas to the last one
        ctx.drawImage(c[i], 0, 0);
    }
    for (i = 0; i < c.length - 1; i++) { //remove the duplicates
        c[i].remove();
    }
    //add data to url
    function downloadCanvas(link, canv, filename) {
        link.href = canv.toDataURL();
        link.download = filename;
    }
    $("#dl1").click(function () {
        downloadCanvas(this, c[2], 'test.png');
    });

}, 1000); //wait till animation end

//IGDATACHART CODE
$(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,
        axes: [{
            name: "NameAxis",
            type: "categoryX",
            title: "Country",
            label: "CountryName"
        }, {
            name: "PopulationAxis",
            type: "numericY",
            minimumValue: 0,
            title: "Millions of People",
        }],
        series: [{
           ...