JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.dataviz.min.css">
<div id="Chart" style="relative;"></div>

CSS

.custom-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: .2;
    filter: alpha(opacity=60); 
   background-color: #6495ed;
    font-size: 34px;
}
#message{
    position: absolute; left: 30%; top: 50%;
   
}

JavaScript

function onDataBinding(e) {
    $('<div class="custom-overlay"><p id="message">No data available</p></div>').appendTo("#Chart");
}

var dataSource = [
    ]

function createChart() {
    $("#Chart").kendoChart({

        dataSource: {
            data: dataSource
        },

        title: {
            text: "MyChart"
        },
        valueAxis: [
            {
            name: "valueAxis",
            min: 0,
            max: 20}],
        series: [
            {
            field: "A"},
        {
            field: "B"}],
        categoryAxis: {
            field: "C"
        },
        dataBound: function(e) {
            var showMessage = this.dataSource.data().length == 0;
        }
    });
}

$(document).ready(function() {
    createChart();
    onDataBinding();
});