JSFiddle - React, Tailwind, and code Playground

by Kesav Telaprolu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<div  id="container"        
      style="width: 1240px;        
             height: 688px;               
             border-radius: 10px;               
             border: 1px solid #dbdbdb;
             overflow:auto;
             position:relative">
          
</div>

CSS

/*
 * Legal Disclaimer
 *
    print '\n', 'Note that the webfonts share the TT sources'
 * These Fonts are licensed for unlimited use on domains and their subdomains of The Kantar Group.
 * It is illegal to download or use them on other websites.
 *
 * While the @font-face statements below may be modified by the client, this
 * disclaimer may not be removed.
 *
 * Lineto.com, 2016
 */

   @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");
    ...

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%;
 }
 #chart_wrapper div {
 	margin : 0px;
  box-sizing:border-box;
 } 
 </style>`)

    function dotme(text) {
        text.each(function() {
            var text = d3.select(this);
            var words = text.text().split(/\s+/);

            var ellipsis = text.text('').append('tspan').attr('class', 'elip').text('...');
            var width = parseFloat(text.attr('width')) - ellipsis.node().getComputedTextLength();
            var numWords = words.length;

            var tspan = text.insert('tspan', ':first-child').text(words.join(' '));
            helper.attrs(tspan, {
                "dominant-baseline": "text-before-edge",
                "text-anchor": "start",
                "font-size": "18px",
                "font-weight": "700",
                "font-family": "KantarBrownWeb-Bold"
            })

            while (tspan.node().getComputedTextLength() > width && words.length) {
                words.pop();
                tspan.text(words.join(' '));
            }

            if (words.length === numWords) {
                ellipsis.remove();
            }
        });
    }

    var helper = {
        attrs: function(selector, options) {

            var attrs = Object.keys(options);

            attrs.forEach(function(value, index, array) {
                selector.attr(value, options[value])
            })
        },
        styles: function(selector, options) {

            var styles = Object.keys(options);

            styles.forEach(function(value, index, array) {
                selector.style(value, options[value])
  ...