JSFiddle - React, Tailwind, and code Playground

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: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  animationEnabled: false,
  axisY:{
    reversed: true,
  },
  toolTip: {
    shared: true
  },
  legend:{
    cursor: "pointer",
  },
  data: [
    {
      type: "bar",
      showInLegend: false,
      name: "Gold",
      color: "gold",
      indexLabel: " ",
      axisXType: "secondary",
      dataPoints: [
        { y: 100, label: "USA", name: "Gold" },
        { y: 269, label: "EU", name: "Gold" },
      ]
    },
    {
      type: "error",
      name: "Gold",
      lineColor:"yellow",
      whiskerColor: "gray",
      axisXType: "secondary",
      indexLabelTextAlign: "left",
      indexLabelPlacement: "outside",
      indexLabelFormatter: function(e){
        if(e.index === 0)
          return e.dataSeries.name + " -  " + e.dataPoint.y[1];
          else
          return " ";
        
      },  
      dataPoints: [
        { y: [0, 30], label: "USA", color: "red" },
        { y: [0, 6], label: "EU", color: "red" },
        { y: [0, 0], label: " ", color: "white" },
        { y: [0, 0], label: " ", color: "white" },
      ]
    },
    {
      type: "bar",
      showInLegend: false,
      name: "Silver",
      color: "silver",
      indexLabel: " ",
      axisXType: "secondary",
      dataPoints: [
        { y: 90, label: " ", name: "Silver" },
        { y: 150, label: " ", name: "Silver" },
      ]
    },
    {
      type: "error",
      name: "Silver",
      lineColor:"yellow",
      whiskerColor: "gray",
      axisXType: "secondary",
      indexLabelPlacement: "outside",
      indexLabelFormatter: function(e){
        if(e.index === 0)
          return e.dataSeries.name + " -  " + e.dataPoint.y[1];
          else
          return " ";
        
      },  
      dataPoints: [
        { y: [0, 100], label: "USA", color: "green" },
        { y: [0, 150], label: "EU", color: "green" },
        { y: [0, 0], label: " ", color: "white" },
        { y: [0, 0], label: " ", color: "white" },
      ]
    },
    {
    ...