JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<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/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container3"> </div>

CSS

#container3 {
 height: 350px;
 margin: 0;
 width:70%;
 }

JavaScript

var n = 1;
 Highcharts.setOptions({
  colors: [ 'green',]
 });

 Highcharts.chart('container3', {
  credits: {
   enabled: false,
  },
  chart: {
   polar: true,
   type: 'line',
   marginLeft: 100,
   marginRight: 100,
   style: {
    fontFamily: 'Georgia',
   }
  },

  title: {
   text: '',
   x: -80
  },

  pane: {
   startAngle: 90,
  },

  xAxis: {
   categories: ['Category 1', 'Category 2', 'Category 3', 'Category 4'],
   tickmarkPlacement: 'on',
   lineWidth: 0,
   labels: {
   style: {     fontSize: '150%',},


},
  },

  yAxis: {
   gridLineInterpolation: 'polygon',
   lineWidth: 0,
   min: 0,
   labels: {
    enabled: false,
   },
  },

  series: [{
   name: 'My series',
   data: [9, 10, 13, 10],
   pointPlacement: 'on',
   zIndex: 400,
   visible: true,
   events: {
    legendItemClick: function () {
     return false;                 
    }

   }

  }],
  navigation: {
   buttonOptions: {
    enabled: false,
   }
  }
 });