JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

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

JavaScript

google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Quelle: IAO, Europäische Kommission', 'Frauen verdienen weniger in Prozent'],
          ['China', -41],
          ['Südkorea', -36],
          ['Großbritannien', -36],
          ['Indien', -33],
          ['Argentinien', -33],
          ['Japan', -28],
          ['Russland', -27],
          ['Kanada', -25],
          ['USA', -22],          
          ['Indonesien', -22],
          ['Brasilien', -22],
          ['Südafrika', -21],
          ['Saudi Arabien', -20],
          ['Deutschland', -19],
          ['Australien', -17],
          ['Mexiko', -17],
          ['Frankreich', -16],
          ['EU', -16], 
          ['Türkei', -7],
          ['Italien', -7]
        ]);
      var options = {
          height: 500,
          colors: ['#ffd366'],

          legend: { 
          position: 'none', }, 
          
haxis: {slantedTextAngle: 90}, 
          
          chart: {
          title: 'Gender Pay Gap', 
          subtitle: 'So viel verdienen Frauen weniger als Männer in Prozent', 
    },};
        var chart = new google.charts.Bar(document.getElementById('chart_gendergab'));
        chart.draw(data, options);
      }