JSFiddle - React, Tailwind, and code Playground

by amcharts

HTML

<script src="//cdn.amcharts.com/lib/4/core.js"></script>
<script src="//cdn.amcharts.com/lib/4/charts.js"></script>
<script src="//cdn.amcharts.com/lib/4/maps.js"></script>
<div id="chartdiv">
</div>

CSS

#chartdiv {
  height: 500px;
}

JavaScript

let chart = am4core.create('chartdiv', am4charts.XYChart);
chart.data = [
  {category: 'A', foo: -42.008283024798004, bar: 57.99171697520199},
  {category: 'B', foo: -2.451211785555296, bar: 82.42351244536056},
  {category: 'C', foo: -10.909106222693696, bar: 80.60647368300283},
]
  let categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
  categoryAxis.dataFields.category = 'category';
  categoryAxis.renderer.grid.template.location = 0;
  categoryAxis.renderer.inversed = true;
  categoryAxis.renderer.minGridDistance = 20;
  categoryAxis.renderer.axisFills.template.disabled = false;
  categoryAxis.renderer.axisFills.template.fillOpacity = 0.05;

  let valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
  valueAxis.min = -100;
  valueAxis.max = 100;
  valueAxis.renderer.minGridDistance = 50;
  valueAxis.renderer.ticks.template.length = 5;
  valueAxis.renderer.ticks.template.disabled = false;
  valueAxis.renderer.ticks.template.strokeOpacity = 0.4;
  // line for 95%
  var range = valueAxis.axisRanges.create();
  range.value = 95;
  range.label.text = '95% threshold';
  range.label.paddingTop = 40;
  range.label.location = 0.85;
  range.label.horizontalCenter = 'middle';
  range.grid.stroke = am4core.color('#A96478');
  range.grid.strokeWidth = 2;
  range.grid.strokeOpacity = 1;
  range.grid.strokeDasharray = '8,4';
  valueAxis.renderer.labels.template.adapter.add('text', function(text) {
    return text + '%';
  });

  // Legend
  chart.legend = new am4charts.Legend();
  chart.legend.position = 'bottom';

  // Use only absolute numbers
  chart.numberFormatter.numberFormat = '#.#s';

  function createSeries(field, name, color) {
    let series = chart.series.push(new am4charts.ColumnSeries());
    series.dataFields.valueX = field;
    series.dataFields.categoryY = 'category';
    series.stacked = true;
    series.name = name;
    series.stroke = null;
    series.fill = color;

    let label = series.bullets.push(new am4charts.LabelBullet());
   ...