JSFiddle - React, Tailwind, and code Playground

by anikettiwari

HTML

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

<button id="sort1">sort A - Z</button>
<button id="sort2">sort min - max</button>
<button id="sort3">sort max - min</button>

<div id="containerel" style="width: 100%; height: 3250px;"></div>

JavaScript

var categories = ['Allen', 'Anderson', 'Beasley', 'Beck', 'Bennett', 'Booth', 'Brown', 'Cannan', 'Caughlin Ranch', 'Corbett', 'Depoali', 'Desert Heights', 'Diedrichsen', 'Dodson', 'Donner Springs', 'Double Diamond', 'Drake', 'Duncan', 'Dunn', 'Elmcrest', 'Gerlach K-12', 'Gomes', 'Gomm', 'Greenbrae', 'Hall', 'Hidden Valley', 'Huffaker', 'Hunsberger', 'Hunter Lake', 'Incline ES', 'Juniper', 'Lemelson', 'Lemmon Valley', 'Lenz', 'Lincoln Park', 'Loder', 'Mathews', 'Maxwell', 'Melton', 'Mitchell', 'Moss', 'Mount Rose K-8', 'Natchez', 'Palmer', 'Peavine', 'Pleasant Valley', 'Risley', 'Sepulveda', 'Silver Lake', 'Smith (Alice)', 'Smith (Kate)', 'Smithridge', 'Spanish Springs ES', 'Stead', 'Sun Valley', 'Taylor', 'Towles', 'Van Gorder', 'Verdi', 'Veterans', 'Warner', 'Westergard', 'Whitehead', 'Winnemucca', 'Middle Schools', 'Billinghurst', 'Clayton', 'Cold Springs', 'Depoali', 'Dilworth', 'Incline MS', 'Mendive', 'Obrien', 'Pine', 'Shaw', 'Sparks MS', 'Swope', 'Traner', 'Vaughn', 'High Schools', 'AACT', 'Damonte Ranch', 'Galena', 'Hug', 'Incline HS', 'McQueen', 'North Valleys', 'Reed', 'Reno', 'Spanish Springs HS', 'Sparks HS', 'TMCC HS', 'Wooster', 'Alternative Schools', 'Innovations', 'Inspire', 'North Star', 'RISE', 'Turning Point'];

Highcharts.chart('containerel', {
  chart: {
    type: 'bar',
    events: {
      load: function() {
        var points = this.series[0].points,
          chart = this,
          newPoints = [];

        Highcharts.each(points, function(point, i) {
          point.update({
            name: categories[i]
          }, false);
          newPoints.push({
            x: point.x,
            y: point.y,
            name: point.name
          });
        });
      //  chart.redraw();

        // Sorting A - Z
        $('#sort1').on('click', function() {
          newPoints.sort(function(a, b) {
            if (a.name < b.name)
              return -1;
            if (a.name > b.name)
              return 1;
            return 0;
         ...