JSFiddle - React, Tailwind, and code Playground

HTML

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

<p>
    <div id="chart-utilization">
    </div>
</p>

JavaScript

var usageData = [];


for (j = 0; j < 5; j++) {
    var data = [];
    for (i = 0; i < 52; i++) {
        data.push({
            Max: j + 1,
            Capacity: j + 1,
            Arriving: j + 1,
            Departing: j + 1
        });
    }

    usageData.push({
        text: j,
        value: j,
        Usage: data
    });
}


$('#chart-utilization').kendoChart({
    title: {
        text: "Parking utilization for week"
    },
    dataSource: {
        data: usageData[0].Usage
    },
    series: [{
        type: "column",
        field: "Max",
        name: "Max utilization"}],
    categoryAxis: {
        field: "Week"
    },
    tooltip: {
        visible: true,
        template: "${ Max } of ${ Capacity }"
    },
    legend: {
        visible: false
    }
});