JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 420px; max-width: 600px; height: 400px; margin: 0 auto"></div>

<div style="display:none">
  <!-- Source: http://or.water.usgs.gov/cgi-bin/grapher/graph_windrose.pl -->
  <table id="freq" border="0" cellspacing="0" cellpadding="0">
    <tr nowrap bgcolor="#CCCCFF">
      <th colspan="9" class="hdr">Table of Frequencies (percent)</th>
    </tr>
    <tr nowrap bgcolor="#CCCCFF">
      <th class="freq">Direction</th>
      <th class="freq">&lt; 0.5 m/s</th>
      <th class="freq">0.5-2 m/s</th>
      <th class="freq">2-4 m/s</th>
      <th class="freq">4-6 m/s</th>
      <th class="freq">6-8 m/s</th>
      <th class="freq">8-10 m/s</th>
      <th class="freq">&gt; 10 m/s</th>
      <th class="freq">Total</th>
    </tr>
    <tr nowrap>
      <td class="dir">N</td>
      <td class="data">1.81</td>
      <td class="data">1.78</td>
      <td class="data">0.16</td>
      <td class="data">0.00</td>
      <td class="data">0.00</td>
      <td class="data">0.00</td>
      <td class="data">0.00</td>
      <td class="data">3.75</td>
    </tr>
    <tr nowrap bgcolor="#DDDDDD">
      <td class="dir">NNE</td>
      <td class="data">0.62</td>
      <td class="data">1.09</td>
      <td class="data">0.00</td>
      <td class="data">0.00</td>
      <td class="data">0.00</td>
      <td class="data">0.00</td>
      <td class="data">0.00</td>
      <td class="data">1.71</td>
    </tr>
    <tr nowrap>
      <td class="dir">NE</td>
      <td class="data">0.82</td>
      <td class="data">0.82</td>
      <td class="data">0.07</td>
      <td class="data">0.00</td>
      <td class="data">0.00</td>
      <td class="data">0.00</td>
      <td class="data">0.00</td>
      <td...

JavaScript

$(function() {
  var
    colors = Highcharts.getOptions().colors,
    each = Highcharts.each,
    series = [{
      yAxis: 0,
      data: [10, 20, 30]
    }, {
      yAxis: 1,
      data: [1, 2, 3]
    }, {
      yAxis: 2,
      data: [4, 2, 1]
    }, {
      yAxis: 3,
      data: [5, 1, 3]
    }, {
      yAxis: 4,
      data: [2, 3, 4]
    }],
    yAxis = [],
    panes = [],
    startAngle = 0;

  each(series, function(serie, i) {
    yAxis.push({
      pane: i,
      showLastLabel: true,
      gridLineWidth: i === 0 ? true : false,
      labels: {
        useHTML: true,
        formatter: function() {
          return '<span style="color:' + colors[i] + '">' + this.value + '</span>';
        }
      }
    });

    panes.push({
      startAngle: startAngle
    });

    startAngle += 72;
  });

  // Parse the data from an inline table using the Highcharts Data plugin
  $('#container').highcharts({
    chart: {
      polar: true,
      type: 'line'
    },

    title: {
      text: 'Wind rose for South Shore Met Station, Oregon'
    },

    subtitle: {
      text: 'Source: or.water.usgs.gov'
    },

    pane: panes,

    legend: {
      align: 'right',
      verticalAlign: 'top',
      y: 100,
      layout: 'vertical'
    },

    xAxis: {
      tickmarkPlacement: 'on'
    },

    yAxis: yAxis,

    series: series
  });
});