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", {
	axisY: {
  	gridThickness: 0,
    labelFormatter: function(e){
    	return " "
    },
    tickLength: 0,
    stripLines: [
    	{
      	value: 3,
        color: "transparent",
        label: "-3",
        labelPlacement: "outside",
        labelFontColor: "black",
        labelBackgroundColor: "transparent",
        lineThickness: 0
      },
      {
      	value: -3,
        color: "transparent",
        label: "-3",
        labelPlacement: "outside",
        labelFontColor: "black",
        labelBackgroundColor: "transparent"
      },
      {
      	value: 0,
        color: "black",
        label: "100%",
        labelPlacement: "inside",
        labelFontColor: "black",
        labelBackgroundColor: "transparent"
      }
    ]
  },
  axisX: {
  	gridThickness: 0,
    labelFormatter: function(e){
    	return " "
    },
    tickLength: 0,
    lineThickness: 0
  },
  data: [
    {
      type: "bubble",
      indexLabelMaxWidth: 100,
      dataPoints: [
        { x: 2, y: 2, z: 10, indexLabel: "NON-FOREIGN POLICY AGENCY - 1.27M EMPLOYEES" },
        { x: 1, y: -2, z: 5, indexLabel: "FOREIGN POLICY AGENCY - 850K EMPLOYEES " },
        { x: 3, y: -2, z: 0, color: "transparent", toolTipContent: null }
        
      ]
    }					
  ]
});

chart.render();