JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var category =  ["08/12", "07/12", "06/12", "05/12", "04/12", "03/12", "02/12"];
var data = [{
     name: "Active",
    stack: "test",
     data: [24216, 45351, 52341, 0, 94636, 57849, 58363]         
 }, {
     name:"idle",
     stack: "test",
     data:[2030, 2344, 546, 0, 888, 6530, 200]
 }]

 $("#chart").kendoChart({
    
            theme: $(document).data("kendoSkin") || "default",
            title: {
                text: "Test"
            },
            legend: {
                position: "bottom"
            },
            seriesDefaults: {
                type: "column",
                labels: {
                    visible: true,
                    format: "{0}"
                }
            },
            series: data,
            seriesColors: ["#009bd7", "#cd1533"],
            valueAxis: {
                labels: {
                    template: "#= kendo.format('{0:0}', value / 60) # hours"
                }
            },
            categoryAxis: {
                categories: category,
            },
            tooltip: {
                visible: true,
                template: "#= kendo.format('{0:0}', value / 60) # hours #= kendo.format('{0:0}', value % 60) # mins"
            },
            transitions: false
    
    })