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;

  for( var inx = 0; inx < len; ++inx ) {
    for(var jnx = 0; jnx < len - 1 - inx; ++jnx) {
      if( dps[jnx].color > dps[jnx+1].color ) {
        var temp = dps[jnx];
        dps[jnx] = dps[jnx+1];
       ...