JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[chart]" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
</head>
<body>
  <div id="chart"></div>
  <script>
    $(function() {
     var chartData = new Array();
        var nt = {
            x: 100,
            y: 100,
            size: 1000,
            color: 'navy',
            category: 'National Average'
        }
        chartData.push(nt);
        var entry = {
            x: 300,
            y: 100,
            size: 75,
            color: 'red',
            category: 'Global Average'
        }
        chartData.push(entry);
      
      
       $('#chart').kendoChart({        
        title: {
            text: 'Bubble Chart'
        },
        legend: {
            visible: true, 
            position: 'bottom'
        },
        series: [{
          type: "bubble",
          data: chartData
        }],
        xAxis: {
            title: {
                text: "Cost Score"
            },
            labels: {
                format: "{0:N0}"
        }}
        });
    });
  </script>
</body>
</html>