JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="width: 800px; height: 310px; margin: 0 auto">
</div>

JavaScript

//Provide Wind Direction (degrees), Wind Speed (m/s), and Start Date (Date.UTC)
  //Assumes a time interval of 1 hour

  var windDirections = [344.557, 346.203, 347.966, 349.855, 349.398, 348.922, 348.425, 344.755, 340.74, 336.372, 338.343, 340.282, 342.185, 349.972, 357.855, 5.544, 9.751, 13.792, 17.639, 22.696, 27.732, 32.671, 37.189, 42.406, 48.389, 51.288, 54.719, 58.812, 58.894, 59.02, 59.241, 53.782, 47.473, 40.289, 42.209, 44.017, 45.719, 51.482, 57.874, 64.82, 62.509, 57.077, 31.952, 344.04, 311.376, 297.392, 286.896, 281.694, 278.636];

//  var windSpeeds = [6.95, 6.716, 6.487, 6.265, 6.14, 6.015, 5.89, 5.624, 5.383, 5.172, 5.211, 5.256, 5.307, 5.226, 5.243, 5.357, 5.453, 5.577, 5.727, 5.716, 5.75, 5.827, 5.419, 5.049, 4.727, 4.354, 3.994, 3.651, 3.008, 2.364, 1.721, 1.597, 1.489, 1.403, 1.445, 1.489, 1.535, 1.451, 1.384, 1.336, 0.951, 0.569, 0.212, 0.194, 0.292, 0.433, 0.646, 0.869, 1.097];
  
   var windSpeeds = [50, 47, 44, 41, 38, 35, 32, 29, 26, 23, 20, 17, 14, 11, 8, 7, 6, 5.577, 5.727, 5.716, 5.75, 5.827, 5.419, 5.049, 4.727, 4.354, 3.994, 3.651, 3.008, 2.364, 1.721, 1.597, 1.489, 1.403, 1.445, 1.489, 1.535, 1.451, 1.384, 1.336, 0.951, 0.569, 0.212, 0.194, 0.292, 0.433, 0.646, 0.869, 1.097];

  var startDate = Date.UTC(2015, 11, 7);
$(function() { // On DOM ready...
  window.meteogram = new Meteogram('container', windDirections, windSpeeds, startDate);
});



function Meteogram(container, windDirections, windSpeeds, startDate) {
  this.windDirections = windDirections;
  this.windSpeeds = windSpeeds;
  this.startDate = startDate;
  this.container = container;
 this.createChart(); //Plots the graph
 
}




Meteogram.prototype.createChart = function() {
  var meteogram = this;
  this.chart = new Highcharts.Chart(this.getChartOptions(), function(chart) {
    meteogram.onChartLoad(chart);
  });
};

Meteogram.prototype.onChartLoad = function(chart) {
  this.drawWindArrows(chart);
};


//Draw the wind arrows. Each arrow path is generated by the windArrow...