JSFiddle - React, Tailwind, and code Playground
by stratdaz
HTML
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.dataviz.min.css">
<div id="chart"></div>
JavaScript
var dr = [
{
"MonthNumber": 1,
"MonthName": "Jan",
"Year": 2010,
"Fee": null
},
{
"MonthNumber": 2,
"MonthName": "Feb",
"Year": 2010,
"Fee": null
},
{
"MonthNumber": 3,
"MonthName": "Mar",
"Year": 2010,
"Fee": 432.34
},
{
"MonthNumber": 4,
"MonthName": "Apr",
"Year": 2010,
"Fee": 432.34
},
{
"MonthNumber": 5,
"MonthName": "May",
"Year": 2010,
"Fee": null
},
{
"MonthNumber": 6,
"MonthName": "Jun",
"Year": 2010,
"Fee": null
},
{
"MonthNumber": 7,
"MonthName": "Jul",
"Year": 2010,
"Fee": 432.34
},
{
"MonthNumber": 8,
"MonthName": "Aug",
"Year": 2010,
"Fee": 432.34
},
{
"MonthNumber": 9,
"MonthName": "Sep",
"Year": 2010,
"Fee": 432.34
},
{
"MonthNumber": 10,
"MonthName": "Oct",
"Year": 2010,
"Fee": 432.34
},
{
"MonthNumber": 11,
"MonthName": "Nov",
"Year": 2010,
"Fee": 432.34
},
{
"MonthNumber": 12,
"MonthName": "Dec",
"Year": 2010,
"Fee": 200.34
},
{
"MonthNumber": 1,
"MonthName": "Jan",
"Year": 2011,
"Fee": 1202.34
},
{
"MonthNumber": 2,
"MonthName": "Feb",
"Year": 2011,
"Fee": 1002.34
},
{
"MonthNumber": 3,
"MonthName": "Mar",
"Year": 2011,
"Fee": 1402.34
},
{
"MonthNumber": 4,
"MonthName": "Apr",
"Year": 2011,
"Fee": 1802.34
},
{
"MonthNumber": 5,
"MonthName": "May",
"Year": 2011,
"Fee": 802.34
},
{
"MonthNumber": 6,
"MonthName": "Jun",
"Year": 2011,
"Fee": 702.34
},
{
"MonthNumber": 7,
"MonthName": "Jul",
"Year": 2011,
"Fee": 1202.34
},
{
"MonthNumber": 8,
"MonthName": "Aug",
"Year": 2011,
"Fee": 1202.34
},
{
"MonthNumber": 9,
"MonthName": "Sep",
"Year":...