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/highcharts.js"></script>

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

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%;
 }
 
/* Use for 3 lines of text before truncation */
.mle-3 {
  overflow: hidden;
  position: relative;
  line-height: 1em;
  max-height: 3.0em;

  padding-right: 1em;
   margin-top: 1em;
  margin-bottom: 1em;

}

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

}

.mle-3:after {
  content: '';
  position: absolute;
  right: 0;
  width: 1em;
  height: 1em;
  margin-top: 0.2em;

  background: #FFFFFF;
}
.concepts {
  font-weight:400;
  width:96px;
  height:0px;
  font-family:Arial;
  font-size:16px;
  color:#000000;
  white-space: normal;
   word-wrap:break-word;

}



 </style>`)

 

   var chartHeader = `<div id=title></div>
      <div  id=power></div>
       <div  id=chosenBrands></div>
        <div  id=leadingBrands></div>
      `;
    var chartImage = chartHeader;
  $("#chart_div").append(chartImage);
    $("#title").css({ "width": "1180px", "line-height": "42px", "font-family": "Arial", "font-size": "24px", "color": "(R51 G51 B51)","font-weight": "Bold" });
   
    $("#title").html(input.title+" "+input.brandName);
    var DataSeriesList =[],categories=[];
   $("#power").css({ "width":"200px","margin-left":"30px","margin-top":"10px","float":"left"})
   $("#chosenBrands").css({ "width":"500px","margin-left":"10px","margin-top":"10px","float":"left"})
   $("#leadingBrands").css({ "width":"400px","margin-top":"10px","float":"left"})
  
               var...