JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div id="container" style="height: 400px; width: 900px;overflow-y:scroll;"></div>
JavaScript
(Input => {
//-chart one input
var steadyvalue = Input.equitySignatureData[1];
var riskValue = Input.equitySignatureData[0];
var opportunityValue = Input.equitySignatureData[2];
//--chart two input
var shareLostValue = Input.shareSpendData[0];
var decreaseSpendValue = Input.shareSpendData[1];
var shareGainedValue = Input.shareSpendData[2];
var increaseSpendValue = Input.shareSpendData[3];
var Chart1boxvalueList = [];
var Chart2boxvalueList = [];
var Chart1MaxValueList = [Math.max.apply(null, steadyvalue), Math.max.apply(null, riskValue), Math.max.apply(null, opportunityValue)]
var chart1MaxValue = Math.max.apply(null, Chart1MaxValueList);
var maxwidth = Math.max.apply(null, steadyvalue) + Math.max.apply(null, riskValue) + Math.max.apply(null, opportunityValue);
var Chart2MaxValueList = [chart1MaxValue, Math.max.apply(null, shareLostValue), Math.max.apply(null, decreaseSpendValue), Math.max.apply(null, shareGainedValue), Math.max.apply(null, increaseSpendValue)]
var chart2MaxValue = Math.max.apply(null, Chart2MaxValueList);
var implicitChartwidth = maxwidth + chart1MaxValue + 200;
var implicitChartHeight = maxwidth + chart1MaxValue + 300;
var steadyYPosition = implicitChartHeight / 2;
var steadyXPosition;
var AtRiskboxvalue;
var Steadyboxvalue;
var Opportunityboxvalue;
var scale = 70;
//box size scale function
function boxwidthcalc(chartdata, boxsize, Maxvalue) {
for (var a = 0; a < chartdata.length; a++) {
var obj = []
for (var b = 0; b < chartdata[a].length; b++) {
if (chartdata[a][b] == Maxvalue)
obj.push(scale);
else
obj.push(Math.sqrt((chartdata[a][b] / Maxvalue) * scale * scale));
}
boxsize.push(obj)
}
}
var Brandtabledetails;
var listofdivds;
var innerdivwidth;
//div framing function
function...