JSFiddle - React, Tailwind, and code Playground

by Ashish688

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: 800px;width:900px"></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 projectedshare =[
         ]; 
      var yourBusiness =[
    
      ];
    /// Power In Mind Chart Related Calculation 
      for(var xid=0;xid<Math.min.apply(null,input.xaxisDetails)-1;xid++)
      {
          projectedshare.push('null');
          yourBusiness.push('null');
      }
      for(var pim=0;pim<input.chartData.marketShare.length;pim++)
      {
          projectedshare.push(input.chartData.powerInTheMind[pim])
          yourBusiness.push(input.chartData.marketShare[pim])
      }
      for(var h=0;h<input.xaxisDetails.length;h++)
      {
        if(h==0)
        {
             xaxisinternal.push(Math.min.apply(null,input.xaxisDetails)-1);
             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([xaxisinternal[m],input.chartData.marketShare[m],input.chartData.marketShare[m]]);
           }
             else
           {
              if(input.chartData.powerInTheMind[m] <...