JSFiddle - React, Tailwind, and code Playground

by Nalin Sajwan

HTML

<script src="//code.highcharts.com/highcharts.js"></script>
<script src="//code.highcharts.com/highcharts-more.js"></script>
<!-- <script src="//code.highcharts.com/modules/exporting.js"></script> -->
<script src="//code.highcharts.com/modules/drilldown.js"></script>

<div id="container" style="width: 500px; height: 500px; margin: 0 auto"></div>

JavaScript

var renderArc = function(renderTo, chart, parts) {
	/* 
        * Remove previous rendered arc from id Maturity.
    */
    $.each($("#"+renderTo+" > div > svg").children("#renderedArc"),function(index,renderedArc) {
        $(renderedArc).remove();
    });
	
	var customColors = ["#058DC7", "#50B432", "#ED561B", "#DDDF00", "#24CBE5", "#7cb5ec", "#434348", "#90ed7d", "#f7a35c", "#8085e9", "#f15c80", "#e4d354", "#2b908f", "#f45b5b", "#91e8e1", "#696969", "#64E572", "#FF9655", "#FFF263", "#6AF9C4"];

	// console.log("parts",parts);

	var colorsLength = customColors.length - 1;

	var count = 0;

	for(var i = 0; i < parts; i++) {
		//setting count back to 0 if colours exceed 20.
		if(count > colorsLength) {
			count = 0;
		}

		var centerX = chart.plotLeft + chart.yAxis[0].center[0];
		var centerY = chart.plotTop + chart.yAxis[0].center[1];
		var outerRradius = chart.yAxis[0].height;
		var innerRadius = 0;
		var start = -Math.PI/2 + (Math.PI/(parts/2) * i);
		var end = -Math.PI/2 + (Math.PI/(parts/2) * (i+1));
		var color = new Highcharts.Color(customColors[count]).setOpacity(0.5).get();
		count++;

		chart.renderer.arc(centerX,centerY,outerRradius,innerRadius,start,end).attr({
			id: "renderedArc",
			fill: color,
			'stroke-width': 1
		}).add();
	};
};

$(function () {

	var renderTo = "container"
    
    var chart = new Highcharts.Chart({
	    chart: {
	        polar: true,
			type: 'xy',
            renderTo: renderTo,
            events: {
            	load: function(){
                    renderArc(renderTo,this,this.xAxis[0].max);
                },
                drilldown: function (e) {
                	renderArc(renderTo,this,e.seriesOptions.data.length);
                },
                drillup: function(e) {
                	renderArc(renderTo,this,e.seriesOptions.data.length);
                }
            }
	    },
	    title: {
	        text: 'Highcharts Polar Chart'
	    },
	    xAxis: {
	        /*labels: {
	        	formatter: function () {
	   ...