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="height:688px;width:1240px;overflow:auto;margin:auto;border-radius:6px;border:1px solid #dbdbdb;"></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"),
       ...

JavaScript

( input =>{

  $('head').append(`<style>
div.example {
padding: 0px;
background: #ffffff;  
}


/* Use for 1 lines of text before truncation */
.mle-1 {
overflow: hidden;
position: relative;
line-height: 1.1em;
max-height: 1em; 
text-align: left;
padding-right: 1em;
padding-top:6px;
}

.mle-1:before {
content: '...';
position: absolute;
right: 0;
bottom: 0;
}

.mle-1:after {
content: '';
position: absolute;
right: 0;
width: 1em;
height: 1em;
margin-top: 0.2em;
background: #FFFFFF;
}
/* Use for 3 lines of text before truncation */
.mle-3 {
overflow: hidden;
position: relative;
line-height: 1em;
max-height: 3em; 
text-align: center;
padding-right: 1em;
padding-left: 1em;
padding-top:2px;
}


.mle-3:before {
content: '...';
position: absolute;
right: 0;
bottom: 0;
}

.mle-3:after {
content: '';
position: absolute;
right: 0;
width: 1.5em;
height: 1em;
margin-top: 0.2em;
background: #FFFFFF;
}
.concepts {
font-weight:700;
width:150px;
font-family:KantarBrownWeb-Bold;
font-size:17px;
color:#000000;
white-space: normal;
word-wrap:break-word;

} 


#leftcolumn::after {
content:'';
position:absolute;
right:80px;
top:6px;
width:1px;
display:block;
background-color:#dbdbdb;
height:99%;

}

#rightcolumn table tr td p { margin :0px}
</style>`);

//var size = input.chart_data.data_series.length > 1 ? 165 :230    
//console.log(size); 
var chartWidth = ((input.chart_data.data_series.length * 159)+97) 
var linewidth = ((input.chart_data.data_series.length * 159)+67) 
var footerwidth = ((input.chart_data.data_series.length * 159)+67) <= 1180 ? 1180 : ((input.chart_data.data_series.length * 159)+67);
    //TITLE TEMPLATE
var titleHtml =
`
<div class="chartTitles">

<div id="title"></div>
<div id="subTitle"></div>
<div id="chartTitle">
<div id="lefttitle" style="width:50%"></div>
<div id= "righttitle" style="width:50%;text-align:right"></div>
<div style="clear:both"></div>
</div>

</div>`;


//CHART TEMPLATE

var chartHtml =
`
<div id="chartContainer">
<div id="leftcolumn"...