JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.src.js"></script>

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
  var data = [100, 50, 20, -10],
      min = Math.min.apply(null, data),
      max = Math.max.apply(null, data),
      total = max - min,
      colorMin = new Highcharts.Color('rgb(255, 0, 0)'),
      colorMax = new Highcharts.Color('white'),
      tweenColors = Highcharts.ColorAxis.prototype.tweenColors;
      
   coloredData = data.map(value => {
     var pos = (value - min) / total;
     
     return {
       y: value,
       color: tweenColors(colorMin, colorMax, pos)
     };
   });

    Highcharts.chart('container', {
    
    
        series: [{
            type: 'bar',
            data: coloredData,
            borderWidth: 1,
            borderColor: 'black'
        }]
    });
});