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": "Instagram",
"data": [
{
"country": "Argentina",
"value": 1,
"positive": 1
},
{
"country": "Brazil",
"value": 1,
"neutral": 1
},
{
"country": "Indonesia",
"value": 2,
"positive": 1,
"neutral": 1
},
{
"country": "Philippines",
"value": 1,
"neutral": 1
},
{
"country": "Poland",
"value": 1,
"neutral": 1
},
{
"country": "Russia",
"value": 1,
"neutral": 1
},
{
"country": "South Africa",
"value": 1,
"positive": 1
},
{
"country": "United Kingdom",
"value": 1,
"negative": 1
}
]
},
{
"label": "Facebook",
"data": [
{
"country": "Barbados",
"value": 1,
"negative": 1
},
{
"country": "Brazil",
"value": 2,
"positive": 2
},
{
"country": "China",
"value": 1,
"positive": 1
},
{
"country": "France",
"value": 1,
"negative": 1
},
{
"country": "Indonesia",
"value": 2,
"positive": 2
},
{
"country": "Palestinian Territor",
"value": 1,
"negative": 1
}
]
},
{
"label": "Twitter",
"data": [
{
"country": "China",
"value": 2,
"neutral": 2
},
{
"country": "Colombia",
"value": 1,
"negative": 1
},
{
"country": "Poland",
"value": 1,
"positive": 1
},
{
"country": "Russia",
"value": 2,
"positive": 1,
"negative": 1
}
]
}
];

// Create axes
var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "country";
categoryAxis.title.text = "Local country offices";
categoryAxis.renderer.grid.template.location =...