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: 5px;
  background: #ffffff;  
}

/* 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 {
  font-weight:700;
  width:280px;
  font-family:KantarBrownWeb-Light;
  font-size:15px;
  color:#000000;
  white-space: normal;
}
</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);
     return createLegend;
   }
   createLegend.renderTo = function(selector){

    var container = $("<div></div>").appendTo(selector);
    container.addClass("legend-container");

    data.forEach((rowdata,index)=>{
      
      var row = $("<div></div>").appendTo(container);
      row.addClass("legend-row-"+(index+1));
      row.css("justify-content",justify);

      createLegenditems(row,rowdata);

    })

    function createLegenditems(row,rowdata){
        var widths = [];
        var labelLengths = [];
        var labelRatios = [];
        var maxWidth = 1180/rowdata.length;

        rowdata.forEach((value)=>{
          labelLengths.push(value.label.length)
        })

        var labelMaxLength =...