JSFiddle - React, Tailwind, and code Playground
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 => {
var MarketLevel =[{
name:"At risk"
},
{
name:"Steady"
},
{
name:"Opportunity"
}]
var MarketLevelDetails =[{
name:"High risk",
color:"rgb(59, 5, 65)",
xposition:43
},
{
name:"Lower risk",
color:"rgb(187, 63, 193)",
xposition:208
},
{
name:"High share",
color:"rgb(204, 204, 204)",
xposition:345
},
{
name:"Latent opportunity",
color:"rgb(15, 123, 162)",
xposition:532
},
{
name:"Strong opportunity",
color:"rgb(109, 231, 246)",
xposition:691
}]
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 = 100;
var boxvalue = [];
var xPosb = [];
var labelpos = [];
for (var d = 0; d < boxminmaxlist.length; d++) {
if (boxminmaxlist[d] == 0) {
boxvalue.push(scale);
xPosb.push(265);
labelpos.push(55);
}
else {
//console.log((input.chartData[d]/boxsizebaseOnvalue[0])*scale)
var bsize = Math.sqrt(Math.round((input.chartData[d] / boxsizebaseOnvalue[0]) * scale * scale));
console.log(bsize);
var boxround = bsize % 10;
var sizeval = bsize < 10 ? Math.round(bsize) : Math.round(bsize - boxround);
boxvalue.push(sizeval);
if (sizeval < 5) { xPosb.push(362); labelpos.push(12);...