JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.dataviz.min.css">
<div id="chart" style="width: 400px; height: 600px"></div>
JavaScript
var ds = new kendo.data.DataSource({
transport: {
read: {
//using jsfiddle echo service to simulate JSON endpoint
url: "/echo/json/",
dataType: "json",
type: "POST",
data: {
// /echo/json/ echoes the JSON which you pass as an argument
json: JSON.stringify([{ "year": "1000", "sales": 20 },
{ "year": "1500", "sales": 10 },
{ "year": "1600", "sales": 15 },
{ "year": "2000", "sales": 60}])
}
}
}
});
$("#chart").kendoGrid({
dataSource: ds,
series: [{
field: "sales",
name: "Sales"
}],
categoryAxis: {
field: "year"
}
});