JSFiddle - React, Tailwind, and code Playground

by Rogério Saraceni

HTML

<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//www.amcharts.com/lib/4/animated.js"></script>



<div class="box-charts" id="chartdiv-conclusao"></div>

CSS

@import url("https://fonts.googleapis.com/css?family=Archivo+Narrow");

body {
  font-family: "Archivo Narrow";
}

.box-charts {
    position: relative;
    display: block;
    margin-bottom: 10px;
    width: 100%;
    height: 400px;
}

JavaScript

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

	var chartConclusao = am4core.create("chartdiv-conclusao", am4charts.XYChart);

	var title = chartConclusao.titles.create();
	title.text = "Conclusão das Entregas";
	title.fontSize = 18;
	title.fontWeight = 400;
	title.align = "center";
	title.marginBottom = 10;

	//create category axis for years
	var categoryAxis = chartConclusao.yAxes.push(new am4charts.CategoryAxis());
	categoryAxis.dataFields.category = "entrega";
	categoryAxis.renderer.inversed = true;
	categoryAxis.renderer.grid.template.location = 0;
	categoryAxis.renderer.cellStartLocation = 0.1;
	categoryAxis.renderer.cellEndLocation = 0.9;
	categoryAxis.renderer.labels.template.fontSize = 10;
	categoryAxis.renderer.grid.alpha = 0;
	categoryAxis.renderer.grid.template.disabled = true;

	let label = categoryAxis.renderer.labels.template;
	label.wrap = true;
	label.width = 200;

	//create value axis for income and expenses
	var valueAxis = chartConclusao.xAxes.push(new am4charts.ValueAxis());
	valueAxis.renderer.grid.template.disabled = true;
	valueAxis.renderer.opposite = false;
	valueAxis.renderer.labels.template.fontSize = 11;

	//create columns
	var series = chartConclusao.series.push(new am4charts.ColumnSeries());
	series.dataFields.categoryY = "entrega";
	series.dataFields.valueX = "conclusao";
	series.dataFields.valueX2 = "evolucao";
	series.name = "Conclusão";
	series.fill = am4core.color("#3498db");
	series.columns.template.fillOpacity = 1;
	series.columns.template.strokeOpacity = 0;
	series.tooltipText = "{categoryY}: {valueX.value.formatNumber('###.0')}%";


	// Set cell size in pixels
	var cellSize = 60;
	chartConclusao.events.on("datavalidated", function(ev) {
	  
		// Get objects of interest
		var chart = ev.target;
		var categoryAxis = chart.yAxes.getIndex(0);

		// Calculate how we need to adjust chart height
		var adjustHeight = chart.data.length * cellSize - categoryAxis.pixelHeight;

		// get current chart...