JSFiddle - React, Tailwind, and code Playground

by gehapraveen

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"></div>

JavaScript

//input data for BrandN Equity Signature chart[1.1,2.7,2.1,18.1,1.6]
var input={
    "title": "Equity Signature - Non-incremental",
    "subtitle": "Brand N",
    "chartData": [1.0,1.2,	24.7,	9.0,	20.51174548]
}

var MarketLevel =[{
      name:"At risk"
  },
  {
      name:"Steady"
  },
  {
      name:"Opportunity"
  }]
  
  var MarketLevelDetails =[{
      name:"High risk",
      color:"rgb(59, 5, 65)",
      xposition:45
  },
  {
      name:"Lower risk",
      color:"rgb(187, 63, 193)",
      xposition:205
  },
  {
      name:"High share",
      color:"rgb(204, 204, 204)",
      xposition:335
  },
  {
      name:"Latent opportunity",
      color:"rgb(15, 123, 162)",
      xposition:535
  },
  {
      name:"Strong opportunity",
      color:"rgb(109, 231, 246)",
      xposition:685
  }]
 $(function() {
var boxsizebaseOnvalue =[];

for(var a=0;a<input.chartData.length;a++)
{
    boxsizebaseOnvalue.push(input.chartData[a]);
}
var boxsortedlist =boxsizebaseOnvalue.sort(function(a,b){return b-a});
var boxminmaxlist =[];

for(var b=0;b<input.chartData.length;b++)
{
  for(var c=0;c<boxsortedlist.length;c++)
  {
    if(input.chartData[b] == boxsortedlist[c])
    {
      boxminmaxlist.push(c);
      break;
    }

  }
}
var scale =110;
var boxvalue = [];
var xPosb =[];
var labelpos =[];
for(var d=0;d<boxminmaxlist.length;d++)
{
  if(boxminmaxlist[d]== 0)
  {
      boxvalue.push(scale);
      xPosb.push(255);
      labelpos.push(55);
  }
  else
  {
    //console.log((input.chartData[d]/boxsizebaseOnvalue[0])*scale)
    var bsize = Math.round((input.chartData[d]/boxsizebaseOnvalue[0])*scale);
    //console.log(bsize);
    var boxround = bsize%10;
    var sizeval = bsize < 10 ? Math.round(bsize) : Math.round(bsize-boxround); 
    boxvalue.push(sizeval);
    if(sizeval < 10)
    { xPosb.push(358); labelpos.push(8);      }
    else if(sizeval >= 10  && 20 > sizeval  )
    {   xPosb.push(355);  labelpos.push(input.chartData[d] < 10? 13:15);  }
    else if(sizeval >= 20  && 30 >...