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 < 8) {
    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])
  }

  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] || input.chartData.powerInTheMind[m] > input.chartData.marketShare[m]) {
        rangelist[0].data.push([m, input.chartData.powerInTheMind[m] - 0.1, input.chartData.marketShare[m]]);
      } else {
        rangelist[0].data.push([m, null, null]);

      }
    }
  }

  // auto scaling for...