JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>
<div id="chart"></div>
JavaScript
$("#chart").kendoChart({
dataSource: {
data: [
{
"date": 1372629600000,
"value": 6534,
"label": "2013-07-01 - 2013-07-31"
},
{
"date": 1375308000000,
"value": 5892,
"label": "2013-08-01 - 2013-08-31"
},
{
"date": 1377986400000,
"value": 3373,
"label": "2013-09-01 - 2013-10-01"
}
]
},
series: [
{
field: "value",
markers: {
visible: true,
background: "#FC3",
size: 8,
border: {
color: "#FC3",
width: 1
}
},
type: "area",
labels: {
visible: false,
format: "{0}"
},
color: "#FC3"
}
],
seriesClick : function(e){
var selectedDate = e.category;
var categoryAxis = $('#chart').data('kendoChart').options.categoryAxis;
categoryAxis.min = new Date(selectedDate.getFullYear(), selectedDate.getMonth());
categoryAxis.max = new Date(selectedDate.getFullYear(), selectedDate.getMonth() + 1);
categoryAxis.baseUnit = "days";
categoryAxis.labels.rotation = -90;
$('#chart').data('kendoChart').refresh();
},
transitions: false,
tooltip: {
visible: true,
template: "#=dataItem.label# <br/> #=value#"
},
categoryAxis: {
field: "date",
majorGridLines: {
visible: false
},
labels: {
dateFormats: {
...