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 dataPoints = [];
var indexLabels = ["High", "Low", "Medium"];
var colors = [];
var labels = ["Jan", " ", " ", "Feb", " ", " ", "March", " ", " ", " "];

var rgbToHex = function (rgb) { 
  var hex = Number(rgb).toString(16);
  if (hex.length < 2) {
    hex = "0" + hex;
  }
  return hex;
};

function sleepFor( sleepDuration ){
  var now = new Date().getTime();
  while(new Date().getTime() < now + sleepDuration){ /* do nothing */ } 
}

// Use the entire 256 colors for our sorting visualization
for (var i = 0; i < 56; i++) {

  // Get a random number between 0 and 255.
  var randomNumber1 = Math.floor( Math.random() * 256 );
  var randomNumber2 = Math.floor( Math.random() * 256 );
  var randomNumber3 = Math.floor( Math.random() * 256 );
  // var colorHexCode = "#" + rgbToHex(randomNumber1) + rgbToHex(randomNumber2) + rgbToHex(randomNumber3);
  var colorHexCode = "#adad" + rgbToHex(randomNumber1);
  dataPoints.push({
    y: 100,
    label: colorHexCode,
    color: colorHexCode
  });
}

var chart = new CanvasJS.Chart("chartContainer", {
  animationEnabled: true,
  colorSet:  "customColorSet",
  theme: "light2", 
  title: {
    text: "Data Feed"
  },

  axisY: {
    title: "Height",
    maximum: 100,
    lineThickness: 0,
    tickThickness: 0,
    gridThickness: 0,
    stripLines: [{
      value: 0,
      showOnTop: true,
      color: "gray",
      thickness: 2
    }]
  },
  axisX: {
    lineThickness: 0,
    tickThickness: 0,
    title: "Color Hexadecimal Codes"
  },  
  data: [{
    type: "stackedColumn",
    label: "label",
    indexLabelPlacement: "outside",
    indexLabelOrientation: "horizontal",
    dataPoints: dataPoints
  }]
});

bubbleSort();
//chart.render();

function bubbleSort() {
  var dps = chart.options.data[0].dataPoints;
  var len = dps.length;
  var inx = 0;
  var jnx = 0;

  (function sortEachElement() {
    if(jnx >= len - 1 - inx) {
      jnx = 0;
      inx++;
    }
    if(inx < len) {
      if( dps[jnx].color > dps[jnx+1].color ) {
       ...