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 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>
<div id="columnChart"></div>
JavaScript
$(function () {
$("#columnChart").igDataChart({
width: "100%",
dataSource: [
{ "Country": "Vienna", "Elevation": 170 },
{ "Country": "Minsk", "Elevation": 198 },
{ "Country": "Brussels", "Elevation": 76 },
{ "Country": "Sarajevo", "Elevation": 577 },
{ "Country": "Sofia", "Elevation": 591 },
{ "Country": "Zagreb", "Elevation": 130 },
{ "Country": "Prague", "Elevation": 244 },
{ "Country": "Aarhus", "Elevation": 105 }
],
title: "Elevation by Country",
axes: [{
name: "xAxis",
type: "categoryX",
label: "Country"
}, {
name: "yAxis",
type: "numericY"
}],
series: [{
name: "series1",
type: "column",
isHighlightingEnabled: true,
isTransitionInEnabled: true,
xAxis: "xAxis",
yAxis: "yAxis",
valueMemberPath: "Elevation",
showTooltip: true
}]
});
});