JSFiddle - React, Tailwind, and code Playground

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>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chart-template"></div>
<button id="next-gauge">process gauge</button>
<div class="normalised-charts">
  <div id="normalised-chart-1" class="normalised-chart"></div>
  <div id="normalised-chart-2" class="normalised-chart"></div>
  <div id="normalised-chart-3" class="normalised-chart"></div>
</div>

CSS

#chart-template {
  width: 200px;
  height: auto;
  min-height: 200px;
  border: 1px solid red;
}

.normalised-charts {
  display: flex;
}

.normalised-chart {
  width: 200px;
  height: auto;
  min-height: 200px;
  border: 1px solid blue;
}

JavaScript

am4core.useTheme(am4themes_animated);

var chart = am4core.create("chart-template", am4charts.RadarChart);

chart.startAngle = -180;
chart.endAngle = 0;
chart.innerRadius = am4core.percent(66);

var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
categoryAxis.renderer.labels.enabled = false;

var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
valueAxis.max = 0;
valueAxis.strictMinMax = true;
valueAxis.renderer.labels.enabled = false;

var backgroundSeries = chart.series.push(new am4charts.RadarColumnSeries());
backgroundSeries.dataFields.valueX = "full";
backgroundSeries.dataFields.categoryY = "category";

var okRange = valueAxis.createSeriesRange(backgroundSeries);
okRange.value = 0;
okRange.endValue = 0;
okRange.contents.fillOpacity = 1;
okRange.contents.fill = "green";

var warningRange = valueAxis.createSeriesRange(backgroundSeries);
warningRange.value = 0;
warningRange.endValue = 0;
warningRange.contents.fillOpacity = 1;
warningRange.contents.fill = "orange";

var dangerRange = valueAxis.createSeriesRange(backgroundSeries);
dangerRange.value = 0;
dangerRange.endValue = 0;
dangerRange.contents.fillOpacity = 1;
dangerRange.contents.fill = "red";

var dataSeries = chart.series.push(new am4charts.RadarColumnSeries());
dataSeries.dataFields.valueX = "value";
dataSeries.dataFields.categoryY = "category";
dataSeries.columns.template.strokeWidth = 0;

var valueLabel = chart.createChild(am4core.Label);
valueLabel.x = am4core.percent(50);
valueLabel.y = am4core.percent(50);
valueLabel.horizontalCenter = "middle";
valueLabel.verticalCenter = "middle";
valueLabel.text = "";

var createImage = (containerId) => {
  console.log('create image for ' + containerId);
  var invalidSprites = am4core.registry.invalidSprites[chart.uid];
  if (invalidSprites && invalidSprites.length > 0) {
    console.log('invalid sprites: ' + invalidSprites.length);
   ...