I have a problem with Google Charts, I get it to show what I want with the type of chart I need. When putting many values in the charts I have to increase the height of the chart, but at the same time that I increase the height of the chart so that all the values are not crowded, it adds a kind of top padding. that is to say, if I have to put a height to the chart of for example 1500px so that it shows the chart well. The space that there is above in white is enormous and it is fatal.

I've been looking in the documentation, but I can't find how to solve that. Does anyone know how to reduce that space ?

Mi code is:

      
        <div id="title-chart">
          <h1>World Chart</h1>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae vitae incidunt quos? Culpa quaerat provident quae ipsam, molestias, aperiam deleniti quas maxime quis optio facilis corrupti, ducimus ipsum consectetur vitae.</p>
          <div class="chart">
            <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
            <div id="chart_div"></div>
            <script>
              google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);

function drawBasic() {

      var data = google.visualization.arrayToDataTable([
        ['Contry', 'count', { role: 'style' }],
        ['Spain', 8175000, 'blue'],
        ['France', 3792000, 'pink'],
        ['Portugal', 2695000, 'black'],
        ['Italy', 3099000, 'silver'],
        ['Creece', 4526000, 'silver'],
        ['Germany', 5526000, 'silver'],
        ['Turquish', 2526000, 'silver'],
        ['Marruecos', 1526000, 'silver'],
        ['Ukranie', 7526000, 'silver'],
        ['Rusia', 6526000, 'silver'],
        ['Andorra', 5526000, 'silver'],
        ['Creece', 4526000, 'silver'],
        ['Germany', 5526000, 'silver'],
        ['Turquish', 2526000, 'silver'],
        ['Marruecos', 1526000, 'silver'],
        ['Ukranie', 7526000, 'silver'],
        ['Rusia', 6526000, 'silver'],
        ['Andorra', 5526000, 'silver'],
        ['Creece', 4526000, 'silver'],
        ['Germany', 5526000, 'silver'],
        ['Turquish', 2526000, 'silver'],
        ['Marruecos', 1526000, 'silver'],
        ['Ukranie', 7526000, 'silver'],
        ['Rusia', 6526000, 'silver'],
        ['Andorra', 5526000, 'silver'],
        ['Creece', 4526000, 'silver'],
        ['Germany', 5526000, 'silver'],
        ['Turquish', 2526000, 'silver'],
        ['Marruecos', 1526000, 'silver'],
        ['Ukranie', 7526000, 'silver'],
        ['Rusia', 6526000, 'silver'],
        ['Andorra', 5526000, 'silver'],
      ]);

      var options = {
        title: 'Total world',
        legend: { position: 'none' },
        height: 1500,
        chartArea: {width: '50%'},
        
      };

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

      chart.draw(data, options);
    }
            </script>
          </div>
        </div>
    </div>

If I reduce the height of the graph, this space is also reduced, but at the same time the values of the graph are getting closer together and it does not look good.

I leave you a picture of what happens: