JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

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

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

JavaScript

$(function () {

$('#container2').highcharts({

                    chart: {
                        renderTo: 'container2',
                        polar: true,
                        type: 'column'
                    },

                    title: {
                        text: '24-Hours Wind Speed and Direction Chart'
                    },

                    pane: {
                        startAngle: 0,
                        endAngle: 360,
                        size: '85%'
                    },
                    legend: {
                        reversed: true,
                        enabled: false,
                        align: 'right',
                        verticalAlign: 'top',
                        y: 100,
                        layout: 'vertical'
                    },
                    xAxis: {
                        tickmarkPlacement: 'on',
                        type: "",
                        categories: ['N','E','S','W'],           
                        labels: {
                            formatter: function () {
                                return this.value + '°';
                            }
                        }
                    },

                    yAxis: {
                        min: 0,
                        endOnTick: true,
                        showLastLabel: false
                    },

                    plotOptions: {
                        series: {
	        	           pointPlacement: 'on'
                        },
                        column: {
                            pointPadding: 0,
                            groupPadding: 0
                        }
                    },

    series: [
	{
	data: [3,1,6,4]
	},
    {
	data: [6,1,4,1]
	},
    {
	data: [5,2,3,2]
	},
    {
	data: [4,3,2,5]
	}]

                });
      
  });