JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1407/js/kendo.all.min.js"></script>
<div class="chart-wrapper">
<div id="chart"></div>
</div>
<br /><br />
<button id="seriouslybro">Seriously bro?</button>
JavaScript
var internetUsers = [ {
"country": "United States",
"year": "2005",
"value": 67.96
}, {
"country": "United States",
"year": "2006",
"value": 68.93
}, {
"country": "United States",
"year": "2007",
"value": 75
}, {
"country": "United States",
"year": "2008",
"value": 74
}, {
"country": "United States",
"year": "2009",
"value": 78
} ];
function createChart() {
$("#chart").kendoChart({
theme: $(document).data("kendoSkin") || "default",
dataSource: {
data: internetUsers
},
title: {
text: "Internet Users"
},
legend: {
position: "bottom"
},
seriesDefaults: {
type: "bar",
labels: {
visible: true,
format: "{0}%"
}
},
series: [{
field: "value",
name: "United States"
}],
valueAxis: {
labels: {
format: "{0}%"
}
},
categoryAxis: {
field: "year"
}
});
}
$("#seriouslybro").click(function(){
createChart();
});