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>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div id="container" style="height: 688px;width:1240px"></div>

JavaScript

(input =>{
///Variable declaration 

   var internalpointPIMD =0.1,internalpointPMS=0.1,minchartPIMD =   1,maxchartPIMD  =1,minchart2= 1,PIMDMinMax =0,PMSMinMax=0;
   var maxchartPMS=1 , minchartPMS=1, barwidth=10, rangelist=[
        {
        data:[]
        }
        ];      
  var xaxisinternal=[
  ];
  var powerInTheMind =[
     ]; 
  var marketShare =[  
  ];
var grpPadding = 0.2;


if (input.PMSDataSeries[0].length < 1) {
  grpPadding = 0.46;
} else if(input.PMSDataSeries[0].length <= 2){
  grpPadding = 0.4;
}
else if(input.PMSDataSeries[0].length <=3){
  grpPadding = 0.35;
}
else if(input.PMSDataSeries[0].length <=5){
  grpPadding = 0.3;
}
else {
  grpPadding = 0.2;
}
/// Power In Mind Chart Related Calculation 
  for(var pim=0;pim<input.chartData.marketShare.length;pim++)
  {
    powerInTheMind.push(input.chartData.powerInTheMind[pim])
      marketShare.push(input.chartData.marketShare[pim])
  }
  console.log("P"+powerInTheMind);
  for(var h=0;h<input.xaxisDetails.length;h++)
  {
    if(h==0)
    {
         //xaxisinternal.push(Math.min.apply(null,input.xaxisDetails));
         xaxisinternal.push(input.xaxisDetails[h]);
    }
    else
    {
        xaxisinternal.push(input.xaxisDetails[h]);
    }
  }
  ///Potential marker share DataSeries Binding
  var PMSDataSeries =[];
  for(var r=0;r<input.PMSDataSeries.length;r++)
  {
      var obj ={};
      obj['name']= input.PMSDataSeriesBrandName[r];
      obj['data']= input.PMSDataSeries[r];
      obj['color']= input.PMSDataSeriesColor[r];
      PMSDataSeries.push(obj);
  }
     
    /// Binding data for Area Range in Power In mind.
    for(var m=0;m<xaxisinternal.length;m++)
        {
       
       if( input.chartData.powerInTheMind[m] < input.chartData.marketShare[m])
       {
           rangelist[0].data.push([m,input.chartData.marketShare[m],input.chartData.marketShare[m]]);
       }
         else
       {
          if(input.chartData.powerInTheMind[m] < input.chartData.marketShare[m]...