JSFiddle - React, Tailwind, and code Playground

by Kesav Telaprolu

HTML

<div id="container" style="width:1240px;height:688px;overflow-x:auto;border:1px solid #dbdbdb;border-radius:10px;"></div>

CSS

@font-face {
   font-family: "KantarBrownWeb-LightItalic";
   src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-LightItalic.eot");
   src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-LightItalic.eot?#iefix") format("embedded-opentype"), url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-LightItalic.woff2") format("woff2"), url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-LightItalic.woff") format("woff");
   font-weight: normal;
   font-style: normal;
 }

 @font-face {
   font-family: "KantarBrownWeb-BoldItalic";
   src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-BoldItalic.eot");
   src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-BoldItalic.eot?#iefix") format("embedded-opentype"), url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-BoldItalic.woff2") format("woff2"), url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-BoldItalic.woff") format("woff");
   font-weight: normal;
   font-style: normal;
 }

 @font-face {
   font-family: "KantarBrownWeb-Italic";
   src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-Italic.eot");
   src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-Italic.eot?#iefix") format("embedded-opentype"), url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-Italic.woff2") format("woff2");
   font-weight: normal;
   font-style: normal;
 }

 @font-face {
   font-family: "KantarBrownWeb-Thin";
   src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-Thin.eot");
   src: url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-Thin.eot?#iefix") format("embedded-opentype"), url("https://riofontstorage.blob.core.windows.net/kantar-fonts/KantarBrownWeb-Thin.woff2")...

JavaScript

$(function() {
     var Input ={
        "title": "Chart 1",
        "CmpBrandNames": ["Specsavers",	"Synsam","Lensway","Online","Department Store(s)","Smarteyes","DirektOptik","Synoptik"],
        "equityGap": [-9.943841315,	3.910886423,	3.58025226,	0.289243079,	0.372318641	,0.149021336,	0.174397497	,-0.067936929],
        "Chart1Data": [
       [10.0,	1.7,	1.8,	2.7,	0.5,	3.6,	0.7,	0.4], //RiskValue
       [62.0,	2.8,	1.8,	3.3,	0.9,	4.0,	0.9,	0.4], //steadyValue
       [3.0,	2.7,	2.5,	2.9,	1.0,	3.4,	1.0,0.8] //Opportunityvalue
     ],
     "Chart2Data": [
       [70.0,	90.9,	0.8,	0.9,	0.3,	1.2,	0.4,	0.2], //share lostValue
       [80.0,	0.8,	0.9,	1.8,	0.2,	2.4,	0.3,	0.3], //decrease spendValue
       [71.8,	1.6,	2.0,	2.5,	0.7,	3.0,	0.9,0.7], //share GainedValue
       [63.2,	1.1,	0.4,	0.5,	0.3,	0.5,	0.1,	0.0] //IncreasesSpendValue
     ] 
     }
  //-chart one input
  var steadyvalue = Input.Chart1Data[1] ;
  var riskValue =  Input.Chart1Data[0];
  var opportunityValue =  Input.Chart1Data[2];
  //--chart two input
  var shareLostValue = Input.Chart2Data[0];
  var decreaseSpendValue = Input.Chart2Data[1];
  var shareGainedValue =Input.Chart2Data[2];
  var increaseSpendValue = Input.Chart2Data[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 =...