amcharts4 layout issue

by amcharts

HTML

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>

<div>
  <div style="display: inline-block;">
    <div class="chartcontainer">
      <div id="chartdiv1" style="width: 300px; height: 300px;"></div>
    </div>
  </div>
  <div style="display: inline-block;">
    <div class="chartcontainer">
      <div id="chartdiv2" style="width: 300px; height: 300px;"></div>
    </div>
  </div>
</div>


<script> /* ~~~ chart 1 ~~~ */

  // Create chart instance
  var chart1 = am4core.create("chartdiv1", am4charts.PieChart);
  //chart1.background.fill = am4core.color("#cccccc");

  // Create pie series
  var series = chart1.series.push(new am4charts.PieSeries());
  series.dataFields.value = "litres";
  series.dataFields.category = "country";

  // Add data
  chart1.data = [{
    "country": "Lithuania",
    "litres": 501.9
  }, {
    "country": "Czech Republic",
    "litres": 301.9
  }, {
    "country": "Ireland",
    "litres": 201.1
  }];

  // And, for a good measure, let's add a legend
  chart1.legend = new am4charts.Legend();
</script>

<script> /* ~~~ chart 2 ~~~ */

  // Create chart instance
  var chart2 = am4core.create("chartdiv2", am4charts.XYChart);
  //chart2.background.fill = am4core.color("#cccccc");

  // Axes
  var categoryAxis = chart2.xAxes.push(new am4charts.CategoryAxis());
  categoryAxis.dataFields.category = "country";
  var valueAxis = chart2.yAxes.push(new am4charts.ValueAxis());

  // Create column series
  var series1 = chart2.series.push(new am4charts.ColumnSeries());
  series1.dataFields.valueY = "income";
  series1.dataFields.categoryX = "country";
  var series2 = chart2.series.push(new am4charts.ColumnSeries());
  series2.dataFields.valueY = "expenses";
  series2.dataFields.categoryX = "country";

  // Add data
  chart2.data = [{
    "country": "Lithuania",
    "income": 100,
    "expenses": 150
  }, {
    "country": "Czech Republic",
    "income": 200,
    "expenses": 150
 ...