JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://kendo.cdn.telerik.com/2015.2.624/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2015.2.624/styles/kendo.common.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;
            if (showMessage) onDataBinding();
        }
    });
}

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