JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var folks = [{
    "name": "Todd Anglin",
        "value": 110,
        "userColor": "#f00"
}, {
    "name": "Brandon Satrom",
        "value": 110,
        "userColor": "#0f0"
}, {
    "name": "Burke Holland",
        "value": 110,
        "userColor": "#00f"
}, {
    "name": "Derick Bailey",
        "value": 110,
        "userColor": "#f0f"
}, {
    "name": "John Bristowe",
        "value": 4,
        "userColor": "#aaa"
}];

$("#chart").kendoChart({
    dataSource: {
        data: folks
    },
    title: {
        text: "Awesome-o-Meter"
    },
    seriesDefaults: {
        type: "bar",
        labels: {
            visible: true,
            format: "{0}%"
        }
    },
    series: [{
        field: "value",
        colorField: "userColor"
    }],
    valueAxis: {
        labels: {
            format: "{0}%"
        }
    },
    categoryAxis: {
        field: "name"
    }
});