JSFiddle - React, Tailwind, and code Playground

by davishacker

HTML

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

JavaScript

var category =  ["08/12", "07/12", "06/12", "05/12", "04/12", "03/12", "02/12"];
var barLabelTotal = [26246, 47695, 52887, 0, 95524, 64379, 58563]; // want to use this data to display as the label for each bar. Is it possible? 
// Also, I dont want to draw with that data in the graph, just for labeling
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],
     labels: {
         visible: true,
         format: "{0}",
         position: "outsideEnd"
     }
 }]

 $("#chart").kendoChart({
    
            theme: $(document).data("kendoSkin") || "default",
            title: {
                text: "Test"
            },
            legend: {
                position: "bottom"
            },
            seriesDefaults: {
                type: "column"
            },
            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
    
    })