JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<div class="legendContract">

</div>
<div id="dashboardLineChart">

</div>

CSS

#dashboardLineChart {
  width: 100%;
  height: 300px;
}

.x-axis-dashboard {
  stroke-width: 0;
}

.x-axis-dashboard line{
    stroke: none;
}
.x-axis-dashboard path{
    stroke : #82919F
}

.x-axis-dashboard text{
  fill: #82919f;
}

.grid line {
    stroke: #82919F;
    stroke-opacity: 0.3;
    shape-rendering: crispEdges;
    stroke-dasharray : 4;
}
.grid path { 
    stroke-width: 0;
}

#tooltip {
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid;
    border-radius: 5px;
    width : auto;
    height: auto;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    text-align: left;
    padding : 10px;
  }
  
  #legendShapeContractBar{
    display: block;
    float: left;
    width: 10px;
    height: 10px;
    margin-top: 5px;
    margin-right: 0.3rem;
    margin-left: 0.3rem;
    border-radius: 50%;
}
#legendSpanContractBar{
    vertical-align: middle;
    color:#2C353D;
    font-family: 'Rubik', sans-serif;
    font-weight: 400;
    font-size: 12px !important;
}

.legendContract li {
  list-style-type: none;
}

JavaScript

let data = [{
date:null,
close:'40',
},{
date:'2-May-12',
close:23,
},{
date:'3-May-12',
close:43,
},{
date:'4-May-12',
close:12,
},{
date:'5-May-12',
close:37,
},{
date:'6-May-12',
close:41,
},{
date:'7-May-12',
close:29,
},{
date:'8-May-12',
close:123,
}];
let element = d3.select('#dashboardLineChart').node();
let divWidth = element.getBoundingClientRect().width;
let divHeight = element.getBoundingClientRect().height;

// set the dimensions and margins of the graph
let margin = {top: 20, right: 30, bottom: 30, left: 20};
let width = divWidth - margin.left - margin.right;
let height = divHeight - margin.top - margin.bottom;

// parse the date / time
const parseTime = d3.timeParse("%d-%b-%y");

let y = d3.scaleLinear().range([height, 0]);



const tooltipStack = d3.select('body').append('div')
     .attr('id', 'tooltip');
     
// define the line
const valueline = d3.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.close); })
		.curve(d3.curveMonotoneX);
    

// gridlines in y axis function
function make_y_gridlines() {		
    return d3.axisLeft(y)
        .ticks(5)
}

// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
let svg = d3.select("#dashboardLineChart").append("svg")
    /* .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom) */
    .attr("preserveAspectRatio", "xMinYMin meet")
    .attr("viewBox", "0 0 " + (divWidth) + " " + (divHeight))
    
 let graphContainer = svg.append("g")
    .attr("transform",
        "translate(" + margin.left + "," + margin.top + ")");

// Get the data
/* d3.csv("data.csv", function(error, data) { */
  /* if (error) throw error; */

  // format the data
  data.forEach(function(d) {
      d.date = parseTime(d.date);
      d.close = +d.close;
  });


  y.domain([0, d3.max(data, function(d) { return d.close; })]);
  // Add the Y Axis
let yAxisContainer =...