Highcharts Demo Fake Data

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container5" style="width:668px"></div>
<div id="container4" style="width:668px"></div>
<div id="container3" style="width:668px"></div>
<div id="container2" style="width:668px"></div>
<div id="container1" style="width:668px"></div>

JavaScript

function getBoxSize(numCategories, series) {
console.log("categories=" + numCategories);
  var numSeries = 2;
  var distanceMax = 0.05;
  var distance = distanceMax * (numCategories);
  console.log("distance=" + distance);
  var boxsize = [];
  var medium = -0.5;
  var startNodeval = 0;
  var extraSeries = 0;
  
  if(series % 2 !=0)
  {
  	extraSeries = distance/2;
  }


  if (numCategories % 2 == 0) {
    var tmph = Math.trunc(numCategories / 2);
    startNodeval = (((numCategories + tmph) * distanceMax) * -1) + extraSeries;   
    console.log(startNodeval);
  } else {
    var tmph = Math.trunc(numCategories / 2) ;
   startNodeval = ((((numCategories + tmph) * distanceMax) * -1) - (distanceMax/2)    ) + extraSeries;
    console.log("categori none" + startNodeval);
  }
  if (numCategories > 1) {
    for (var i = 0; i < numCategories; i++) {
      boxsize.push(startNodeval);
      startNodeval = startNodeval + distance;
      console.log("start node =" + startNodeval)
    }
  } else {
    boxsize.push(-0.025);
    boxsize.push(0.025);
  }
  console.log(boxsize);

  return boxsize;
}

function generateHighchart(containerName, categoryNames, series1Data, series2Data) {
  var boxsizes = [];
  console.log("gencol=" + series1Data.length)
  boxsizes = getBoxSize(series1Data.length, 3); // 3 can be calculate in the code with number of series
  //boxsizes.push(series1Data.length * 0.0257 * -1);
  //boxsizes.push(series1Data.length * 0.0257);

  var gridLineColor = '#acacac';
  var axisTextColor = '#acacac';
  var legendTextColor = 'blue';
  var axisTextSize = '12px';
  Highcharts.chart(containerName, {
    chart: {
      type: 'column',
      height: '338',
      style: {
        fontFamily: "Arial",
        fontSize: "10px"
      }
    },

    plotOptions: {
      series: {
        pointWidth: 31,
        pointPadding: 0,        
        //borderWidth: 2,
        crisp: true
      },
      column: {
        grouping: false,
        borderWidth: 0
      }
    },
   ...