JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
    <html>

    <head>
    <title>Horizontal Bar Chart</title>
    <script src="https://www.chartjs.org/dist/2.7.2/Chart.bundle.js">
    </script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    </head>

    <body>

    <canvas id="chart"></canvas>
    <button id="shuffle">Sort Data</button>
    </body>

JavaScript

const CHART = document.getElementById("chart");

    Chart.defaults.global.animation.duration = 1000;

    Chart.plugins.register({
      beforeUpdate: function(chart) {
    if (chart.options.sort) {
      let dataArray = chart.data.datasets[0].data.slice();
      let dataIndexes = dataArray.map((a, i) => i);
      dataIndexes.sort((a, b) => {
        return dataArray[a] - dataArray[b];
      });

      // sort data array as well
      dataArray.sort((a, b) => b - a);

      // At this point dataIndexes is sorted by value of the data, so we know how the indexes map to each other
      let meta = chart.getDatasetMeta(0);
      let newMeta = [];
      let labels = chart.data.labels;
      let newLabels = [];
      

      meta.data.forEach((a, i) => {
        newMeta[dataIndexes[i]] = a;
        newLabels[dataIndexes[i]] = chart.data.labels[i];
      });

      meta.data = newMeta;
      chart.data.datasets[0].data = dataArray;
      chart.data.labels = newLabels;
        }
      }
    });


    $(document).ready(function(){

            var chartdata = {
                labels: ["Swimming", "Golf", "Soccer", "Baseball", "Running", "Diving", "Archery", "Gymnastics", "Basketball"],
        datasets: [{
            label: "Choices",
            data: [4, 10, 6, 9, 15, 11, 12, 13, 12],
            backgroundColor: ["#a19828", "#b15928", "#fb9a99", "#cab2d6", "#e31a1c", "#b2df8a", "#ff7f00", "#33a02c", "#1f78b4"],
        }]
    };





        var barGraph = new Chart(CHART, {
          type: 'horizontalBar' ,
          data: chartdata,
          options: {
        scales: {
          xAxes: [{
            ticks: {
              beginAtZero: true
            }
          }] 
        }
      }
        });

    document.getElementById('shuffle').addEventListener('click', function() 
    {
    barGraph.options.sort = true;
    barGraph.update();
    barGraph.options.sort = false;
    });

    });