jQuery addClass example

Change class name on click in jQuery

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

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;
}
</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 = Math.max(...labelLengths);
       var labelMinLength =...