JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<div id="chart">Draggable</div>

CSS

span.normal {
    background-color: #00b050
}

span.warning {
    background-color: #c00000
}

span.allowed {
    background-color: #ffc000
}

div {
    width: 200px;
    height: 200px;
    border: 1px solid black;
}

div#d1 {   
    height: 50px;
}

JavaScript

var data =  [
          { "group": "Group 1", "value": 200, "category": "category 1" },
          { "group": "Group 2", "value": 400, "category": "category 1"  },
          { "group": "Group 3", "value": 500, "category": "category 1"  },
          { "group": "Group 1", "value": 300, "category": "category 2" },
          { "group": "Group 2", "value": 600, "category": "category 4" },
          { "group": "Group 3", "value": 500, "category": "category 2" },
          { "group": "Group 1", "value": 100, "category": "category 3" },
          { "group": "Group 3", "value": 200, "category": "category 4" }]

    $("#chart").kendoChart({
        dataSource: {
            data: data,
            group: {
                field: "group"
            },
            sort: {
                field: "category",
                dir: "asc"
            }
        },
        series: [{
            type: "column",
            field: "value",
            categoryField: "category"
        }]
    });