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>
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());
...