JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<!DOCTYPE html>
<html>
    <head>
        <title>Bar chart</title>
    </head>
    <body>
    <div id="chart" style="width: 600px; height: 400px;"></div>
    </body>
</html>

JavaScript

var data = [
    {"ProjectID":1,"Year":2011,"Month":11,"Expense":202.02}, 
    {"ProjectID":1,"Year":2011,"Month":12,"Expense":266.91},
    {"ProjectID":1,"Year":2012,"Month":1,"Expense":274.91},
    {"ProjectID":1,"Year":2012,"Month":2,"Expense":287.3},
    {"ProjectID":1,"Year":2012,"Month":3,"Expense":279.47},
    {"ProjectID":5,"Year":2011,"Month":11,"Expense":261.16},
    {"ProjectID":5,"Year":2011,"Month":12,"Expense":258.13},
    {"ProjectID":5,"Year":2012,"Month":1,"Expense":315.84},
    {"ProjectID":5,"Year":2012,"Month":2,"Expense":344.66},
    {"ProjectID":5,"Year":2012,"Month":3,"Expense":346.18}];

$(document).ready(function() {
    $("#chart").kendoChart({
        theme: "silver",
        title: {
            text: "Total records processed"
        },
        legend: {
            position: "bottom"
        },
        dataSource: {
            data: data,
            group: {
                field: "ProjectID"
            }
        },
        transitions: false,
        series: [{
            type: "column",
            field: "Expense"
        }],
        categoryAxis: {
            field: "Year"                                
        }
    });
});