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>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.621/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.dataviz.min.css">
<button id="withShortLabels">Turn on/off label short function</button>
<button id="1">1</button>
<button id="2">2</button>
<button id="3">3</button>
<button id="4">4</button>
<div id="dad">
    <div id="chartTop" style="width: 550px"></div>
    <div id="chartBot"></div>
</div>
<script type="text/javascript">
    function shortLabel(value) {
    if (value.length > 10) {
        value = value.substring(0, 5) + "..." + value.substring(value.length-3);
    }
    return value
};
</script>

JavaScript

var data = [
    {"ProjectID":"A","Year":"AAAAA","Month":1,"Expense":30}, 
    {"ProjectID":"A","Year":"DDDDDDDDDDDD","Month":2,"Expense":70},
    {"ProjectID":"A","Year":"CCCCCCCCCCCC","Month":3,"Expense":10},
    {"ProjectID":"A","Year":"IIIIIIIIIIIIII","Month":4,"Expense":90},
    {"ProjectID":"A","Year":"EEEE","Month":5,"Expense":85},
    {"ProjectID":"B","Year":"AAAAA","Month":1,"Expense":70},
    {"ProjectID":"B","Year":"DDDDDDDDDDDD","Month":2,"Expense":30},
    {"ProjectID":"B","Year":"CCCCCCCCCCCC","Month":3,"Expense":90},
    {"ProjectID":"B","Year":"IIIIIIIIIIIIII","Month":4,"Expense":10},
    {"ProjectID":"B","Year":"EEEE","Month":5,"Expense":15}];

var withLabelShorter = false;

$(document).ready(function() {
    initializeChart("Top",1,5,false,false);
    $("#all").click(function() {
        initializeChart("Top",1,5,false,false);
        $("#chartBot").remove();
    });
    $("#1").click(function() {splitTable(1);});
    $("#2").click(function() {splitTable(2);});
    $("#3").click(function() {splitTable(3);});
    $("#4").click(function() {splitTable(4);});
    $("#withShortLabels").click(function() {withLabelShorter = !withLabelShorter;});
});

function splitTable(breakpoint){
    initializeChart("Top",1,breakpoint,false,false);
    initializeChart("Bot",breakpoint+1,5,false,false);
};

function initializeChart(which, start, end, withLegend, withTitle){
    $("#chart" + which).remove();
    $("#dad").append("<div id=\"chart" + which +"\" style=\"height:" + ((end-start+1) * 25 + (withLegend ? 100 : 40)) + "px" + "; width:550px\"></div>");
    var labelShorter = (withLabelShorter ? "#=shortLabel(value)#" : "#=value#");
    
    $("#chart" + which).kendoChart({
        title: {
            text: "Total records processed",
            visible: withTitle
        },
        dataSource: {
            data: data,
            group: {
                field: "ProjectID"
            },
            filter: [{
                        field: "Month",
         ...