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 myData = {
    "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 ds = new kendo.data.DataSource({
    change: function(e) {
        var data = this.data();
        var series = [];
        for (var i = 0; i < data.apps.length; i++) {
            var app = data.apps[i];
            series.push({
                data: app.Data,
                name: app.Name
            });
        }
        var chart = $("#chart").data('kendoChart');
        chart.options.categoryAxis.categories = data.labels;
        chart.options.series = series;
        chart.refresh();
    }
});

$("#chart").kendoChart({
    theme: "black",
    seriesDefaults: {
        type: "line"
    },
    legend: {
        position: 'bottom'
    },
    tooltip: {
        visible: true
    },
    categoryAxis: {
        categories: [ 0, 1, 2 ],
        labels: {
            rotation: 315
        }
    },
    series: [{ data: [], name: 'Loading...'}]
});

ds.data(myData);