JSFiddle - React, Tailwind, and code Playground

by Kris

HTML

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

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

JavaScript

$(function () {
                        var data={'m':100,'n':60,'mn':30},
                        rg={'x':300,'y':300},
                        sg={};
                    var angleA=(180-360*data.mn/data.n)/2;
                    var angleB=90-angleA;
                    var b=2*angleB;
    if(b==0||b==180||b==360){
        sg.x=rg.x-data.n
    }else{
        sg.x=rg.x-data.n*Math.sin(2*angleB*(Math.PI/180));
    }

 if(b==90||b==270){
        sg.y=rg.y-data.n;
 }else if(b>90&&b<270){
 sg.y=rg.y-Math.abs(data.n*Math.cos(2*angleB*(Math.PI/180)))-data.n;
 }   else {
        sg.y=rg.y-Math.abs(data.n*Math.cos(2*angleB*(Math.PI/180)));
 }

 var ax=rg.x-(data.m+data.n-2*data.mn)*Math.sin(angleB*(Math.PI/180));
 var ay=rg.y-data.n+(data.m+data.n-2*data.mn)*Math.cos(angleB*(Math.PI/180));
                                        
                   
var circle1=['M',rg.x,rg.y,'A',data.n,data.n,0,1,0,sg.x,sg.y,'A',data.m,data.m,b,0,1,rg.x,rg.y],
    circle2=['M',sg.x,sg.y,'A',data.m,data.m,b,1,0,rg.x,rg.y,'A',data.n,data.n,0,0,1,sg.x,sg.y,],
    circle3=['M',rg.x,rg.y,'A',data.n,data.n,0,0,1,sg.x,sg.y,'A',data.m,data.m,b,0,1,rg.x,rg.y ];
             console.log(circle1);
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            events: {
                load: function () {
                    
                    // Draw the flow chart
                    var ren = this.renderer,
                        count=1,
                        colors = Highcharts.getOptions().colors;
                   

                                        

                      ren.text(data.n,rg.x,rg.y-data.n).css({
                            fontSize: '16px'
                        })
                        .add();
                      ren.text(data.m,ax,ay).css({
                            fontSize: '16px',              
                        })
                        .add();
                       ren.text('10',260,280).css({
       ...