JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv" style="width: 100%; height: 362px;"></div>
JavaScript
var chart;
var chartData = [
{ "option": "Czech Republic", "percentage": 156.90,"color":"#2175d9"},
{ "option": "Ireland", "percentage": 131.10,"color":"#ff9900"},
{ "option": "Germany", "percentage": 115.80,"color":"#448800"},
{ "option": "Australia", "percentage": 109.90,"color":"#2175d9"},
{ "option": "Austria", "percentage": 108.30,"color":"#2175d9"},
{ "option": "UK", "percentage": 99.00,"color":"#2175d9"}
]
drawStuff(chartData);
function drawStuff(val){
// RADAR CHART
chart = new AmCharts.AmSerialChart();
chartData =val;
chart.dataProvider = chartData;
chart.categoryField = "option";
chart.startDuration = 3;
chart.sequencedAnimation = false;
chart.addTitle("Beer chart");
chart.addTitle("test");
// VALUE AXIS
var valueAxis = new AmCharts.ValueAxis();
valueAxis.axisAlpha = 0.15;
valueAxis.minimum = 0;
valueAxis.dashLength = 3;
chart.addValueAxis(valueAxis);
// GRAPH
var graph = new AmCharts.AmGraph();
graph.type = "column";
graph.colorField = "color"
graph.valueField = "percentage";
graph.fillAlphas = 0.6;
graph.balloonText = "[[value]] litres of beer per year";
graph.title="Beer chart";
graph.title="test";
chart.addGraph(graph);
// WRITE
chart.write("chartdiv");
}