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;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

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

div.examples {
 padding: 5px; 
}

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

.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;
}
.concepts {
 width:280px;
 font-family:KantarBrownWeb-Light;
 font-size:15px;
 color:#000000;
 white-space: normal;
}

.legend-container{
  display:flex;
  flex-direction:column; 
  width:1170px;
  padding:5px 10px;
  margin:-7px 30px 0px 30px;
  background: #fcfcfc;
  border-radius: 6px;
  border: 1px solid #dbdbdb
  
}
.legend-container > div{
  display:flex;
  flex-direction:row;  
}
.legend-group{
  display:flex;
  flex-direction:row;
  align-items:center;
  margin-right:20px;
  overflow:hidden;
  
}
.legend-group:last-child{
  margin-right:0px
}
.legend-dot{
  width:16px;
  height:16px;
  margin-right:10px;
  flex-shrink:0
}
.legend-text{
  /* flex-grow:1; */
  min-width: 0px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.legend-text > p{
  margin:0;
  min-width: 0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
</style>`);
function Legend(){
  var data = [];
  var rows = 1;
  var itemCount = 12;
  var multiline = false;
  var justify = "flex-start";
 
  function createLegend(){}

  function chunkArray(myArray, chunk_size){
   var index = 0;
   var arrayLength = myArray.length;
   var tempArray = [];
   
   for (index = 0; index < arrayLength; index += chunk_size) {
       myChunk = myArray.slice(index, index+chunk_size);
       // Do something if you want with the group
       tempArray.push(myChunk);
   }

   return tempArray;
  }
 
  createLegend.data = function(val){
     data = chunkArray(val,itemCount);
   ...