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: 400px; height: 400px;"></div>
    </body>
</html>

JavaScript

var data = [
        { "Value": 1, "Category": "Value 1"}, 
        { "Value": 2, "Category": "Value 2"},
        { "Value": 3, "Category": "Value 3"},
        { "Value": 4, "Category": "Value 4"},
        { "Value": 5, "Category": "Value 5"},
        { "Value": 6, "Category": "Value 6"},
        { "Value": 7, "Category": "Value 7"}
    ],
    dataSource = new kendo.data.DataSource({
        data: data,
        schema: {                 
            model: {              
                fields: {         
                    value: "value"
                }
            }                    
        }                       
    });

$(document).ready(function() {
    $("#chart").kendoChart({
        theme: "silver",
        legend: {
            position: "right"
        },
        dataSource: dataSource,
        transitions: false,
        series: [{
            type: "pie",
            field: "Value",
            categoryField: "Category"
        }]
    });
    
    dataSource.add({ "Value": 20, "Category": "new Value 20" })
});