JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.dataviz.min.css">
<div id="grid"></div>
<div class="chart-wrapper">
     <div id="chart"></div>
</div>

JavaScript

function onSeriesClick(e) {
    seriesClicked  = true;
    var tr = $("#grid").find("tr[data-uid="+e.dataItem.uid+"]");
    $("#grid").data("kendoGrid").select(tr);
    
    //alert("Clicked value: " + e.value);
}
var seriesClicked = false;
var data = [
            {
            "percentage": 22,
            "source": "Hydro"
         },
    
        {
            "percentage": 2,
            "source": "Solar"
           
        },
          { "percentage": 49,
            "source": "Nuclear"
           
        },
        {  "percentage": 27,
            "source": "Wind"
          
        }
    ];
var dataSource = new kendo.data.DataSource({
     data: data 
});
function createChart() {
    $("#chart").kendoChart({
        dataSource: dataSource ,
        legend: {
            visible: false
        },
        series: [{
            type: "column",
            field: "percentage"
        }],
        axisDefaults: {
            labels: {
                font: "11px Tahoma, sans-serif"
            }
        },
        valueAxis: {
            labels: {
                format: "{0:N0}"
            }
        },
        categoryAxis: {
            field: "source"
        },
        tooltip: {
            visible: true,
          
        },
        seriesClick: onSeriesClick
    });
}

function createGrid() {
    $("#grid").kendoGrid({
        dataSource: dataSource ,
        columns:[
            {
              field: "source",
              title: "Source"
          },
         {
              field: "percentage",
              title: "Percentage"
          }         
            
         ],
        filterable:true,
        selectable:true        
     });
}

$(document).ready(function() {

        // Initialize the chart with a delay to make sure
        // the initial animation is visible
    createChart();
    createGrid();
   
});

$("#chart").click(function(e){
    if(seriesClicked){
         seriesClicked = false;   
        ...