JSFiddle - React, Tailwind, and code Playground

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 90px; width: 100%;"></div>

JavaScript

var values = [71, 71, 71, 71, 71]; // Pass the values here
var median = 200; // Pass the value for the black marker 
var color = ["#4FAD4A","#BFDAB4","#F9E0C7","#E7842D","#A80C36"];

var chart = new CanvasJS.Chart("chartContainer",{
  dataPointWidth: 70,
  axisX:[{
    lineThickness: 0,
    valueFormatString: " ",
    tickLength: 0,
    labelFormatter: function ( e ) {
      return "";  
    }  

  }],
  axisY:[{
    gridThickness: 0,	
    lineThickness: 0,
    valueFormatString: " ",
    tickLength: 0,
    stripLines:[{            
      value: 0,
      showOnTop: true,
      labelBackgroundColor: "white",
      labelFontSize: 12,
      label: "Low",
      labelPlacement: "inside",
      color: "transparent"
    },
    {
      showOnTop: true,
      label: "Extremely alarming",
      labelBackgroundColor: "white",
      labelFontSize: 12,
      labelPlacement: "inside",
       color: "transparent"
    }]
  }],
  data: []
});

var positionOfRightLabel = 0;
for( var i = 0; i < values.length; i++ ){
  chart.options.data.push({
    type: "stackedBar",
    toolTipContent: null,
    dataPoints: [
      {  y: values[i], color:color[i] }
    ]
  });
  positionOfRightLabel = positionOfRightLabel + values[i];
}

chart.options.data.push({
  type: "error",
  whiskerLength: 70,
  whiskerColor: "black",  
  indexLabel: "{y}",
  indexLabelFontSize: 15,
  dataPoints: [
    { y: [median, median], indexLabelPlacement: "outside", indexLabelFormatter: function (e) { 
      if(e.index === 1)
        return e.dataPoint.y[0];
      else 
        return "";  
    }},
  ]
});

chart.render();

chart.options.axisY[0].stripLines[1].value = positionOfRightLabel;
chart.axisY[0].set("maximum", positionOfRightLabel + 10 );
chart.render();