JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://www.google.com/jsapi"></script>
<html>
    <head>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load("visualization", "1", {
                packages: ["corechart"]
            });
            google.setOnLoadCallback(drawChart);

            function drawChart() {
                var data = google.visualization.arrayToDataTable([
["ID", "X Axis Value", "Y Axis Value", "Metric", "Volume"],
["Range: 2-5", 3, 2.5, "Value Provider", 300],
["Range: 2-5", 4, 2.5, "Third Provider", 239],
["Range: 3-8", 3, 7.4, "Second Provider", 344],
["Range: 5-8", 5, 7.3, "Value Provider", 324],
["Range: 2-10", 9, 2.32, "Third Provider", 765],
["Range: 2-5", 5, 3, "Value Provider", 342],
]);

                var options = {
                    title: 'Range Volume',
                    hAxis: {
                        title: 'X Axis'
                    },
                    vAxis: {
                        title: 'Y Axis'
                    },
                    bubble: {
                        textStyle: {
                            fontSize: 11,
														color:'transparent'
                        }
                    }
                };
                var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
                chart.draw(data, options);
            }
        </script>
    </head>
    
    <body>
        <div id="chart_div" style="width: 100%; height: 90vh;"></div>
    </body>

</html>