JSFiddle - React, Tailwind, and code Playground

by Geo George

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<div id="container"></div>

CSS

#container {
    min-width: 310px;
    max-width: 400px;
    height: 400px;
    margin: 0 auto
}

JavaScript

var categories = ['These', 'are', 'test', 'data'],
        count = 0;

    $('#container').highcharts({

        chart: {
            polar: true
        },
        pane: {
	        //startAngle: 45,
	    },

        title: {
            text: 'Highcharts Polar Chart'
        },

        xAxis: {
            tickInterval: 1,
            min: 0,
            max: 4,
            labels: {
                formatter: function () {
                    var value = categories[count];

                    count++;
                    if (count == 5) {
                        count = 0;
                    }

                    return value;
                }
            }
        },
        tooltip: {
            formatter: function () {
                return '<b>' + categories[Highcharts.numberFormat(this.x, 0) - 1] + '</b><br/>' + 'value: ' + this.y;
            }
        },

        yAxis: {
            min: 0,
            tickInterval: 5,
            tickPositions: [0, 1, 2, 3, 4, 5],
            minorTickInterval: 0
        },

        plotOptions: {
            series: {
                pointStart: 0.5,
                pointInterval: 1
            },
            column: {
                pointPadding: 0,
                groupPadding: 0
            }
        },

        series: [{
            type: 'column',
            name: 'test data',
            data: [{
                y: 5,
                color: '#0FCCD9'
            }, {
                y: 1,
                color: '#ED1334'
            }, {
                y: 3,
                color: '#EDCC13'
            }, {
                y: 4,
                color: '#34ED13'
            }]
        }]
    });