JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1007/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1007/styles/kendo.kendo.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1007/js/kendo.all.min.js"></script>
<script src="https://raw.github.com/andrewplummer/Sugar/master/release/sugar-edge.min.js"></script>
<div id="chart"></div>
<script type="text/javascript">
var data = {
    "apps": [
        { "Name": "One", "Data": [8, 4, 10, 15, 6, 2, 7, 12, 10, 11, 5, 9] },
        { "Name": "Two", "Data": [7, 17, 9, 10, 7, 5, 15, 16, 7, 16, 5, 1] },
        { "Name": "Three", "Data": [18, 9, 8, 17, 13, 3, 11, 3, 8, 1, 5, 2] },
        { "Name": "Four", "Data": [5, 19, 7, 13, 8, 5, 19, 11, 2, 3, 16, 1] },
        { "Name": "Five", "Data": [5, 5, 9, 4, 14, 11, 5, 17, 6, 15, 14, 7] }, 
        { "Name": "Six", "Data": [13, 17, 18, 4, 19, 0, 8, 11, 2, 4, 9, 13] }
    ],
    "labels": [ "0:00", "1:00", "2:00", "3:00", "4:00", "5:00", "6:00", "7:00", "8:00", "9:00", "10:00", "11:00" ]
};
</script>

JavaScript

var dataSource = new kendo.data.DataSource({
    data: data.apps
});

var chartSeries = [];
for (var i = 0; i < data.apps.length; i++) {
    var app = data.apps[i];
    chartSeries.push({
        data: app.Data,
        name: app.Name
    });
}

$("#chart").kendoChart({
    theme: "black",
    seriesDefaults: {
        type: "line"
    },
    legend: {
        position: 'bottom'
    },
    tooltip: {
        visible: true
    },
    categoryAxis: {
        categories: data.labels,
        labels: {
            rotation: 315,
            template: '#= value #'
            //template: '#=value.format("{HH}:00")#'
        }
    },
    series: chartSeries
});