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/6.1.1/highcharts.js"></script>
<div id="container" style="width: 1240px;        
             height: 688px;               
             border-radius: 10px;               
             border: 1px solid #dbdbdb;
             overflow:auto;
             position:relative;">

</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") format("woff2");
  font-weight:...

JavaScript

(input => {
    var chartWrapper = $("<div></div>").appendTo("#container")
        .attr("id", "chart_wrapper");

    var chartDiv = $("<div></div>").appendTo("#chart_wrapper")
        .attr("id", "chart_div");

    $('#chart_wrapper').append(`<style>
 
 #chart_wrapper{
 
 	width:1240px;
  height:688px;
   
  position:relative;
  
  padding: 35px 30px 20px 30px;
  
  box-sizing:border-box; 
  
 }
 
 #chart_div{
 	
  	width:100%;
    height:100%;
 }
 
 #chart_wrapper p {
 	margin : 0px;
 }
 #chart_wrapper div {
 	margin : 0px;
  box-sizing:border-box;
 } 
 </style>`)

    // Pass norm width based on the condition. 
    var noveltyBoxSize, noveltyAffectiveBoxSize, noveltyAffectiveRelevanceBoxSize, belowNormMarkerP, belowNormSP, belowNormEP;
    var noveltytip = [], noveltyAffectivetip =[],noveltyAffectiveRelevancetip =[];
    var image_url = {
        'circle': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAMAAADX9CSSAAAAAXNSR0IB2cksfwAAAEhQTFRFAAAA09PT0tLS09PT09PT09PT0tLS09PT09PT1NTUz8/P0tLS09PT0tLS1NTU09PT09PT09PT09PT09PT1dXV1NTU09PT09PTnu/15gAAABh0Uk5TAECPv+//P8/QcBCg4FCwwK+QgPAw329/6YYnTQAAAJ9JREFUeJx1kdEagyAIhSFTyanErO3933TOWpkzrvD/kAMHgC1wUKMe1WCgDrQ0oQOHE1k88cOHIw9++KUxuuqv43mvjnANltLbu4Y7/9WgAG0EyuX0h3Mtgkwd/hRg7HBkSK1qUU6gOxgyvau/6383D9oOp6W/L0PXn7Voytzwzc/sv7r4rw7fpb7XKtW8ZF8m39e8bbMPCiedWJb9/QHf+AUkQ2bXvgAAAABJRU5ErkJggg==',
        'star': 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAMCAMAAACOacfrAAAAAXNSR0IB2cksfwAAADNQTFRFAAAAbGxscHBwbW1tbW1tbGxsbGxsbm5ubW1tcHBwbW1tbW1tbW1tbW1tbGxsbW1tcHBwHWP+RgAAABF0Uk5TAFAQ7/+gf5DwMGCw4N9AcCBPGi0DAAAATUlEQVR4nE2M0RaAIAhDJ2AaWvb/X5stOcf7MsZgAEnYEN1dsj3Mltf6mKjpJ/OgWFCYVs51vZ50sjqcLlqbde/RipoF0q7f3E4ZD/ACXgYBh7J5uT4AAAAASUVORK5CYII=',
        'plus':...