JSFiddle - React, Tailwind, and code Playground

by shakedk

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<div id="chart_div" style="width:320px"></div>

JavaScript

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);

function drawBasic() {

var data = google.visualization.arrayToDataTable([
         ['App Name', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['My Test App Name Appears Here', 6.94, 'blue', 'My Test App Name Appears Here' ],
         ['My Test App Name Appears Here', 10.49, 'blue', 'My Test App Name Appears Here' ],
         ['My Test App Name Appears Here', 19.30, 'blue', 'My Test App Name Appears Here' ],
         ['My Test App Name Appears Here', 24, 'blue', 'My Test App Name Appears Here' ],
         ['My Test App Name Appears Here', 5.30, 'blue', 'My Test App Name Appears Here' ],
         ['My Test App Name Appears Here', 2.30, 'blue', 'My Test App Name Appears Here' ],
         ['My Test App Name Appears Here', 21.45, 'blue', 'My Test App Name Appears Here' ]
      ]);

var options = { 
          chartArea: {width: '90%'},
          height: 500,
          legend: { position: 'none' },
          vAxis:{textStyle:{color: 'red',fontSize: '15', paddingRight: '100',marginRight: '2000'}},
          vAxis: { textPosition: 'none' },
          hAxis:{textStyle:{color: '#005500',fontSize: '30', paddingRight: '1200',marginRight: '1000'}},
          bars: 'horizontal', // Required for Material Bar Charts.
          axes: {             
            x: { 
              0: { side: 'top'} 
            }                     
          }     
        };

      var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

      chart.draw(data, options);
      
        var height = options.height;
        var array = $("#chart_div svg g").children()[3].children;
        for (var i = 0; i < array.length; i++) {

            $("text").removeClass("currentNode");
            array[i].children[0].setAttribute("class", "currentNode");
            var y = height - parseFloat($(".currentNode").attr("y"));
           ...