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">

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

JavaScript

var data = [];

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



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


$('#chart-arriving').kendoChart({
    title: {
        text: "Parking arriving for week"
    },
    dataSource: {
        data: data
    },
    series: [{
        type: "column",
        field: "Arriving",
        name: "Arrivals"}],
    categoryAxis: {
        field: "Week"
    },
    tooltip: {
        visible: true
    },
    legend: {
        visible: false
    }
});

$('#chart-departing').kendoChart({
    title: {
        text: "Parking deparing for week"
    },
    dataSource: {
        data: data
    },
    series: [{
        type: "column",
        field: "Departing",
        name: "Departures"}],
    categoryAxis: {
        field: "Week"
    },
    tooltip: {
        visible: true
    },
    legend: {
        visible: false
    }
});