JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css">
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common-material.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.material.min.css">
<div id="example">
<div class="demo-section k-content">
<div id="stock-chart"></div>
</div>
</div>
JavaScript
$(document).ready(function () {
$("#stock-chart").kendoStockChart({
dataSource: {
data:[
{
"Date": "2000/01/03",
"Open": 41.62,
"High": 41.69,
"Low": 39.81,
"Close": 40.12,
"Volume": 2632000
},
{
"Date": "2000/01/04",
"Open": 39.88,
"High": 41.12,
"Low": 39.75,
"Close": 40.12,
"Volume": 3584700
},
{
"Date": "2000/01/05",
"Open": 42,
"High": 43.31,
"Low": 41.38,
"Close": 42.62,
"Volume": 7631700
},
{
"Date": "2000/01/06",
"Open": 42.25,
"High": 43.44,
"Low": 41.12,
"Close": 43.06,
"Volume": 4922200
}]
},
title: {
text: "The Boeing Company\nNYSE:BA"
},
dateField: "Date",
series: [{
type: "area",
field: "Open"
}],
categoryAxis: {
labels: {
rotation: "auto",
template:"#: (dataItem && dataItem.Open) ? dataItem.Open :...