JSFiddle - React, Tailwind, and code Playground

by edsinek

HTML

<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<div>
    <div>
        <label for="transactions"><input type="checkbox" id="transactions" />Transactions</label>
    </div>
    <div>
        <label for="average"><input type="checkbox" id="average" />Average</label>
    </div>
    <div id="chart" style="width: 600px; height: 400px;">
    </div>
</div>

JavaScript

var data =[ {DrillDownId:"DD01",XAxis:"Jan",DataValue:1150.00,Highest:null,Lowest:null,Average:2.00,XAxisAverageSize:0.00,Transactions:10,SeriesName:"Series One"},{DrillDownId:"DD02",XAxis:"Feb",DataValue:8952.00,Highest:null,Lowest:null,Average:4.00,XAxisAverageSize:0.00,Transactions:20,SeriesName:"Series One"},{DrillDownId:"DD03",XAxis:"Mar",DataValue:8064.00,Highest:null,Lowest:null,Average:3.00,XAxisAverageSize:0.00,Transactions:30,SeriesName:"Series One"},{DrillDownId:"DD11",XAxis:"Jan",DataValue:3251.00,Highest:null,Lowest:null,Average:4.00,XAxisAverageSize:0.00,Transactions:15,SeriesName:"Series Two"},{DrillDownId:"DD12",XAxis:"Feb",DataValue:1986.00,Highest:null,Lowest:null,Average:5.00,XAxisAverageSize:0.00,Transactions:25,SeriesName:"Series Two"},{DrillDownId:"DD13",XAxis:"Mar",DataValue:2580.00,Highest:null,Lowest:null,Average:2.00,XAxisAverageSize:0.00,Transactions:35,SeriesName:"Series Two"},{DrillDownId:"DD21",XAxis:"Jan",DataValue:2044.00,Highest:null,Lowest:null,Average:1.00,XAxisAverageSize:0.00,Transactions:35,SeriesName:"Series Three"},{DrillDownId:"DD22",XAxis:"Feb",DataValue:2497.00,Highest:null,Lowest:null,Average:5.00,XAxisAverageSize:0.00,Transactions:45,SeriesName:"Series Three"},{DrillDownId:"DD23",XAxis:"Mar",DataValue:3920.00,Highest:null,Lowest:null,Average:7.00,XAxisAverageSize:0.00,Transactions:55,SeriesName:"Series Three"}
];

$(document).ready(function () {
    $("#chart").kendoChart({
        theme: "silver",
        title: {
            text: "John Test",
            visible: true,
            align: "left",
            margin: { left: 0 },
            padding: {left: 0 }
        },
        legend: {
            position: "right",
            visible: true
        },
        dataSource: {
            data: data,
            schema: {
                id: "DrillDownId",
                model: {
                    Average: { type: "Number" },
                    XAxis: { type: "String" },
                    XAxisFormatted: {...