JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvg/1.5/canvg.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stackblur-canvas/1.4.1/stackblur.min.js"></script>
    
<button id="getPdf">Get PDF</button>
<div id='analyticsMonth' style="width:100%; height: 300px;  overflow-y: scroll;"></div>
<div id="xAxis">
</div>

<ul class="legend"></ul>

CSS

.axis text {
  font: 10px sans-serif;
}
.axis line,
.axis path {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

 #tooltipAnalyticsMonth {
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 5px;
    width : auto;
    height: auto;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    text-align: center;
    padding : 5px;
  }
  
/* .path-line {
  fill: none;
  stroke: yellow;
  stroke-width: 1.5px;
} */

JavaScript

var data = [{"site":"101111189888908987/1854","total":30643,"disease":503,"wounds":132,"other":0},{"site":"11/1854","total":29736,"disease":844,"wounds":287,"other":106},{"site":"12/1854","total":32779,"disease":1725,"wounds":114,"other":131},{"site":"1/1855","total":32393,"disease":2761,"wounds":83,"other":324},{"site":"2/1855","total":30919,"disease":2120,"wounds":42,"other":361},{"site":"3/1855","total":30107,"disease":1205,"wounds":32,"other":172},{"site":"4/1855","total":32252,"disease":477,"wounds":48,"other":57},{"site":"5/1855","total":35473,"disease":508,"wounds":49,"other":37},{"site":"6/1855","total":38863,"disease":802,"wounds":209,"other":31},{"site":"7/1855","total":42647,"disease":382,"wounds":134,"other":33},{"site":"8/1855","total":44614,"disease":483,"wounds":164,"other":25},{"site":"9/1855","total":47751,"disease":189,"wounds":276,"other":20},
{"site":"16/1855","total":38863,"disease":802,"wounds":209,"other":31},{"site":"17/1855","total":42647,"disease":382,"wounds":134,"other":33},{"site":"18/1855","total":44614,"disease":483,"wounds":164,"other":25},{"site":"19/1855","total":47751,"disease":189,"wounds":276,"other":20},

{"site":"26/1855","total":38863,"disease":802,"wounds":209,"other":31},{"site":"27/1855","total":42647,"disease":382,"wounds":134,"other":33},{"site":"28/1855","total":44614,"disease":483,"wounds":164,"other":25},{"site":"29/1855","total":47751,"disease":189,"wounds":276,"other":20},
{"site":"216/1855","total":38863,"disease":802,"wounds":209,"other":31},{"site":"217/1855","total":42647,"disease":382,"wounds":134,"other":33},{"site":"218/1855","total":44614,"disease":483,"wounds":164,"other":25},{"site":"219/1855","total":47751,"disease":189,"wounds":276,"other":20}];
var key = ["wounds", "other", "disease"];
let newHeight ;
/* console.log(data.length, "data") */
if(data.length <= 15){
newHeight = $("#analyticsMonth").height();
}else{
newHeight = data.length * 35;
}
var svg, width, height, xScale, yScale, xAxis, yAxis,...