Google Visualization Stacked Combo Chart with Dual Y Axis has bar stacks are overlapping

I have a Combo Chart with dual Y axis.

Bolivia and Equador are stacked ontargetAxisIndex: 0.

Madagascar and Ethiopia are also stacked on targetAxisIndex: 1.

Madagascar/Ethiopia stack (total 45) is overlapped in front of the Bolivia/Equador stack (total 25).

How can I get the two stacks side by side? Bolivia/Equador is currently hidden behind Madagascar/Ethiopia.

Any hints are most appreciated!

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

      function drawVisualization() {
        // Some raw data (not necessarily accurate)
        var data = google.visualization.arrayToDataTable([
          ['Month', 'Bolivia', 'Ecuador', 'Madagascar',  'Ethiopia', 'Average'],
          ['2004/05',  10, 15, 20, 25, 18],
          ['2005/06',  10, 15, 20, 25, 18],
          ['2006/07',  10, 15, 20, 25, 18],
          ['2007/08',  10, 15, 20, 25, 18],
          ['2008/09',  10, 15, 20, 25, 18]
        ]);

        var options = {
          title : 'Monthly Coffee Production by Country',
          vAxis: {title: 'Cups'},
          hAxis: {title: 'Month'},
          seriesType: 'bars',
           vAxis: {
              viewWindow: {
                max: 35,
              }   
            },
          series: {
            0: {type: 'bar', targetAxisIndex: 0},
            1: {type: 'bar', targetAxisIndex: 0},
            2: {type: 'bar', targetAxisIndex: 1},
            3: {type: 'bar', targetAxisIndex: 1},
            4: {type: 'line',targetAxisIndex: 0},
          },
          isStacked: true
        };

        var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>