JSFiddle - React, Tailwind, and code Playground

by hippocampuscoronatus

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="chart_div"></div>

CSS

.google-visualization-tooltip {
  opacity: 0.9;
}

JavaScript

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

function drawPyramid() {
      
      var barColor1 = 'opacity: 0.5; stroke-color: #329de5; stroke-width: 1; fill-color: #36a2eb;';
      var barColor2 = 'opacity: 0.5; stroke-color: #f9597b; stroke-width: 1; fill-color: #ff6384;';
      
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'City');
      data.addColumn('number', 'male');
      data.addColumn({type: 'string', role: 'style'});
      data.addColumn('number', 'female');
      data.addColumn({type: 'string', role: 'style'});
      
      data.addRows([
      	['A', 81750, barColor1, -80080, barColor2],
        ['B', 37920, barColor1, -36940, barColor2],
        ['C', 26950, barColor1, -28960, barColor2],
        ['D', 20990, barColor1, -19530, barColor2],
        ['E', 15260, barColor1, -15170, barColor2]
      ]);

      var options = {
        title: 'people',
        isStacked: true,
        hAxis: {
          format: ';',
          direction: -1
        },
        vAxis: {
          direction: -1
        },
        colors: ['#36a2eb', '#f9597b'],
        dataOpacity: 0.3,
        legend: {
        	position: 'bottom',
          maxLines: 3
        },
        tooltip: {
          isHtml: true
        },
        focusTarget: 'category'
      };
      var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
      var formatter = new google.visualization.NumberFormat({
                pattern: '#,###;'
            });
formatter.format(data, 2)
      chart.draw(data, options);
    }