JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>

<div id="chartContainer" style="height: 300px; width: 100%;"></div>

JavaScript

window.onload = function () {
  var chart = new CanvasJS.Chart("chartContainer",{
    theme: "light2",
    title:{
      text: "Column Starting from -150"
    },
		exportEnabled: true,
    axisY: {
      minimum: -150
    },
    toolTip: {
      contentFormatter: function(e) {

        return e.entries[0].dataPoint.label + " " + e.entries[0].dataPoint.y[1]
      }
    },
    data: [{
      dataPoints: [
        { x: 1, y: -30, label: "Venezuela"},
        { x: 2, y: -10,  label: "Saudi" },
        { x: 3, y: -30,  label: "Canada"},
        { x: 4, y: -40,  label: "Iran"},
        { x: 5, y: -11,  label: "Russia"},
        { x: 6, y: -97, label: "UAE"},
        { x: 7, y: -20,  label: "US"},
        { x: 8, y: -50,  label: "China"}
      ]
    }]
  });
  for(var i=0; i<chart.options.data[0].dataPoints.length; i++) {
    chart.options.data[0].dataPoints[i].y = [-150, chart.options.data[0].dataPoints[i].y]; 
  }
  chart.options.data[0].type = "rangeColumn";
  chart.render();
}