JSFiddle - React, Tailwind, and code Playground

by Amit Sinha

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/exporting.js"></script>

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

JavaScript

$(function () {
    var daysOfWeek = ["Monday","Tuesday","W","TH","F","S","SU"];
    
    $('#container').highcharts({

        chart: {
            polar: true
        },

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

        pane: {
            startAngle: -10,
            endAngle: 350
        },

        xAxis: {
            tickInterval: 80,
            min: 0,
            max: 360,
            labels: {
            		enabled: false,
                formatter: function () {
                    if(this.value == 0) {
                        return 24;
                    } else {
                        return this.value*24/360;
                    }
                }
            }
        },

        yAxis: {
            min: -10,
            tickInterval: 80,
            labels: {
                y:50,
                x:-120,
                formatter: function() {
                    return daysOfWeek[this.value/80];
                }
            }
        },

        plotOptions: {
            series: {
                pointStart: 0,
                pointInterval: 10
            },
            bubble: {
                minSize: 5,
                maxSize: 5
            }
        },

        series: [{
            type: 'bubble',
            name: 'Monday',
            data: [[2,2,5],[5,2,4],[5,2,5],[5,2,3],[1,2,3],
                  [1,2,4],[2,2,3]],
            pointPlacement: 'between'
        },
                {
            type: 'bubble',
            name: 'Tuesday',
            data: [[35,40,5],[65,40,10], [95,40,9],[125,40,8],[155,40,5],
                  [190,40,7]],
            pointPlacement: 'between'
        },
                {
            type: 'bubble',
            name: 'Wednesday',
            data: [[82,60,10], [188,60,8],[217,60,6]],
            pointPlacement: 'between'
        },
                {
            type: 'bubble',
            name: 'Thursday',
            data: [[38,80,10],[68,80,8], [200,80,5]],
  ...