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">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.dataviz.default.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<body>
    <div id="monoColorPie"></div>
</body>

CSS

#monoColorPie {
    margin: 25px;
}

JavaScript

$(document).ready(function () {
    var data = [{source:"Color", percentage:.35, color:"blue" },{source:"Mono", percentage:.65, color: "black"}];
    $("#monoColorPie").kendoChart({
        dataSource: {
            data: data
        },
        chartArea: {
            background: 'yellow',
            margin: 0,
            height: 500,
            width: 500
        },
        plotArea: {
            margin: -100
        },
        legend: {
            visible: false  
        },
        series: [{
            type: "pie",
            field: "percentage",
            categoryField: "source",
            colorField: "color",
            animation: false
        }],
        tooltip: {
            visible: true,
            template: "${ category } - ${kendo.toString(value, 'p0')}"
        }
    });
});