JSFiddle - React, Tailwind, and code Playground

by Kesav Telaprolu

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="overflow-y: auto;overflow-x: auto; height:500px;width: 900px;margin: 0 auto;z-index: 0;"></div>

JavaScript

//Top Semicircle Related input Data
var listofMind= ['Exclusive Mind','Routine Mind','Divided Mind','Indifferent Mind','Frustrated Mind']
var listofMindInandUnvolved= ['Exclusive Mind','Routine Mind','Divided Mind - Involved','Divided Mind - Uninvolved','Indifferent Mind','Frustrated Mind']
var BrandName ='Brand A Segement'
// Series is related to Input data from state of Mind without Involved
var series =[ 
    { name:"Total",data:[19.7,1.3,78.8,0.2,10,585]},
    { name:"At risk",data:[13,1.8,85.2,10,10,137]},
    { name:"steady",data:[27.1,1.5,71.3,10,10,73]},
    { name:"Opportunity",data:[59,10,41,10,10,284]}
]
// Series is related to Input data for state of Mind with Involved and unvolved
var seriesInUnvolved =[ 
    { name:"Total",data:[19.7,1.3,76.1,2.8,10.2,10,585]},
    { name:"At risk",data:[13,1.8,83.9,1.3,10,10,137]},
    { name:"steady",data:[27.1,1.5,65.3,6,10,10,73]},
    { name:"Opportunity",data:[59,10,41,10,10,10,284]}
]
   $("#container").highcharts({
    credits: {enabled: false},
    exporting: {enabled: false},
    chart: { 
        useHTML: true,
        marginTop: 0,
        marginBottom: 0,
        marginLeft: 20,
        marginRight: 20,
        zIndex: 20,
         zoomtype:'xy',
        plotBackgroundColor: null,
        plotBorderWidth: 0,
        plotShadow: false,
        events: {
                    load: function() {        
                    var ren = this.renderer;  
                    ren.label("State of Mind ",20,40).attr({
                                zIndex:10,
                            }).css({
                                fontSize: '15px',
                                fontFamily: 'Arial',
                                color: 'rgb(0,0,0)'
                                }).add();
                                  ren.html('<div id=middleline style="width: 880px;height: 1px; background-color: rgb(125,125,125);border-bottom: 1px solid rgb(125,125,125);"></div>',20,245).css().add();
                           ...