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: true,
	exportEnabled: true,
	theme: "light1", // "light1", "light2", "dark1", "dark2"
	//title:{
		//text: ""
	//},
	axisX: {
		
		//prefix: "$",
		suffix:  "", //hr
		//interval: 1
	},
  toolTip: {
  	contentFormatter: function(e) {
    	return "Value: " + e.entries[0].dataPoint.y;
    }
  },
	data: [{
		//type: "bar",
		type: "column", //change type to bar, line, area, pie, etc
		name: "Test",
		//indexLabel: "{y}", //Shows y value on all Data Points
		indexLabel: "{y}",
		yValueFormatString: "#,##0",
		indexLabelFontColor: '#121111', //"#5A5757",
		indexLabelPlacement: "outside",   		
    dataPoints: [
      { x: 10, y: 71 },
      { x: 20, y: 55},
      { x: 30, y: 50 },
      { x: 40, y: 65 },
      { x: 50, y: 95 },
      { x: 60, y: 68 },
      { x: 70, y: 28 },
      { x: 80, y: 34 },
      { x: 90, y: 14}
    ]
	}]
});
setColor(chart);
chart.render();
function setColor(chart){
                for(var i = 0; i < chart.options.data.length; i++) {
                dataSeries = chart.options.data[i];
                for(var j = 0; j < dataSeries.dataPoints.length; j++){
                    if(dataSeries.dataPoints[j].y < 51){
                    dataSeries.dataPoints[j].color = '#6eba01';
                    } if(dataSeries.dataPoints[j].y >= 51){
                    dataSeries.dataPoints[j].color = '#1a2b6d';
                } if(dataSeries.dataPoints[j].y >= 101) {
                    dataSeries.dataPoints[j].color = 'orange';
                }
                }
            }
}