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="ComfortChart" 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("#ComfortChart");
}

var ComfortWindowData = [
    ]

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

        dataSource: {
            data: ComfortWindowData
        },

        title: {
            text: "Comfort Feedback"
        },
        valueAxis: [
            {
            name: "percentage",
            min: 0,
            max: 100},
        {
            name: "count"}
        ],
        chartArea: {
            background: "#E9E9EB"
        },
        seriesDefaults: {
            spacing: 0,
            stack: true,
            axis: "percentage"
        },
        series: [
            {
            field: "Cold",
            name: "Cold",
            color: "blue",
            gap: 0},
        {
            field: "Cool",
            name: "Cool",
            color: "lightblue",
            gap: 0},
        {
            field: "Comfortable",
            name: "Comfortable",
            color: "green",
            gap: 0},
        {
            field: "Warm",
            name: "Warm",
            color: "orange",
            gap: 0},
        {
            field: "Hot",
            name: "Hot",
            color: "red",
            gap: 0},
        {
            field: "Count",
            name: "Count",
            color: "black",
            axis: "count",
            type: "line",
            markers: "false",
            width: 2}
        ],
        categoryAxis: {
            field: "Temperature",
            labels: {
                step: 2
            }
        },
        dataBound: function(e) {
            var showMessage = this.dataSource.data().length == 0;
        }
    });
}

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


});