JSFiddle - React, Tailwind, and code Playground

by notacouch

HTML

<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<link rel="stylesheet" href="//maxcdn.icons8.com/fonts/line-awesome/1.1/css/line-awesome.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.2.1/css/flag-icon.min.css">
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div class='chart' id="chart-1"></div>
<div class='chart' id="chart-2"></div>
<div class='chart' id="chart-3"></div>
<div class='chart' id="chart-4"></div>
<div class='chart' id="chart-5"></div>

CSS

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.chart {
  width: 100%;
  height: 500px;
}

JavaScript

/**
 * ---------------------------------------
 * This demo was created using amCharts 4.
 * 
 * For more information visit:
 * https://www.amcharts.com/
 * 
 * Documentation is available at:
 * https://www.amcharts.com/docs/v4/
 * ---------------------------------------
 */

// fork of https://www.amcharts.com/demos/100-stacked-column-chart/ and https://www.amcharts.com/demos/stacked-clustered-column-chart/
// albeit with x/y axes reversed

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

// Create chart instance
var chart = am4core.create("chart-1", am4charts.XYChart);

// Add data
var preProcessedData = [ {
  "label": "Europe",
  data: [
    {
    	"date": "2017-01-01",
      value: 2.5,
      test: 10
    },
    {
    	"date": "2017-01-02",
      value: 2.5,
      test: 10
    },
    {
    	"date": "2017-01-03",
      value: 2.5,
      test: 10
    },
  ]
}, {
  "label": "North America",
  data: [
    {
    	"date": "2017-01-01",
      value: 2.5,
      test: 10
    },
    {
    	"date": "2017-01-02",
      value: 2.5,
      test: 10
    },
    {
    	"date": "2017-01-04",
      value: 2.5,
      test: 10
    },
  ]
}, {
  "label": "Asia",
  data: [
    {
    	"date": "2017-01-02",
      value: 2.5,
      test: 10
    },
    {
    	"date": "2017-01-04",
      value: 2.5,
      test: 10
    },
    {
    	"date": "2017-01-05",
      value: 2.5,
      test: 10
    },
  ]
}];

// Create axes
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "date";
categoryAxis.title.text = "Local country offices";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 20;
categoryAxis.renderer.cellStartLocation = 0.1;
categoryAxis.renderer.cellEndLocation = 0.9;

var  valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
valueAxis.title.text = "Expenditure (M)";

// Create series
function createSeries(name) {
  var series = chart.series.push(new...