JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.kendostatic.com/2012.1.515/styles/kendo.common.min.css "></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.dataviz.min.css">
<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<div class="chart-wrapper">
<div id="chart"></div>
</div>
JavaScript
function createChart() {
$("#chart").kendoChart({
theme: $(document).data("kendoSkin") || "default",
title: {
text: "Internet Users"
},
seriesDefaults: {
type: "column",
stack: false
},
series: [{
name: "United States",
data: [67.96, 68.93, 75, 74, 78],
// Line chart marker type
markers: {
type: "square"
},
axis: "us"}
],
valueAxis: [
{
name: "us",
title: {
text: "US percent"
},
color: "#ec5e0a"
}
],
categoryAxis: {
categories: [2005, 2006, 2007, 2008, 2009],
labels: {
padding: {
left: 50
}
}
}
});
}
$(document).ready(function() {
createChart();
$(".configuration").bind("change", refresh);
});
function refresh() {
var chart = $("#chart").data("kendoChart"),
series = chart.options.series,
type = $("input[name=seriesType]:checked").val(),
stack = $("#stack").prop("checked");
for (var i = 0, length = series.length; i < length; i++) {
series[i].stack = stack;
series[i].type = type;
};
chart.refresh();
}