JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>

<div id="saleChartDiv" style="width: 100%; height: 350px;"></div>

CSS

.grid line {
  stroke: lightgrey;
  stroke-opacity: 0.7;
  shape-rendering: crispEdges;
}

.grid path {
  stroke-width: 0;
}

JavaScript

let data =[{date: '1-May-12', close: 58.13, value2: 56, value3: 36, value4: 87},
{date:'30-Apr-12',close:null, value2: 87, value3: 66, value4: 87},
{date:'27-Apr-12',close:67.00, value2: 37, value3: 46, value4: 87},
{date:'26-Apr-12',close:89.70, value2: 67, value3: 96, value4: 67},
{date:'25-Apr-12',close:99.00, value2: 89, value3: 86, value4: 87},
{date:'24-Apr-12',close:130.28, value2: 27, value3: 26, value4: 57},
{date:'23-Apr-12',close:166.70, value2: 87, value3: 46, value4: 87},
{date:'20-Apr-12',close:234.98, value2: 57, value3: 96, value4: 97},
{date:'19-Apr-12',close:35.44, value2: 87, value3: 246, value4: 87},
{date:'18-Apr-12',close:43.34, value2: 97, value3: 86, value4: 37},
{date:'17-Apr-12',close:93.70, value2: 87, value3: 46, value4: 87},
{date:'16-Apr-12',close:180.13, value2: 17, value3: 26, value4: 117},
{date:'13-Apr-12',close:205.23, value2: 87, value3: 46, value4: 87},
/* {date:'12-Apr-12',close:62.77, value2: 47},
{date:'11-Apr-12',close:126.20, value2: 87},
{date:'10-Apr-12',close:128.44, value2: 67},
{date:'9-Apr-12',close:66.23, value2: 87},
{date:'5-Apr-12',close:33.68, value2: 87},
{date:'4-Apr-12',close:64.31, value2: 117},
{date:'3-Apr-12',close:null, value2: 87},
{date:'2-Apr-12',close:68.63, value2: 57},
{date:'30-Mar-12',close:99.55, value2: 63},
{date:'29-Mar-12',close:69.86, value2: 87},
{date:'28-Mar-12',close:167.62, value2: 37},
{date:'27-Mar-12',close:64.48, value2: 97},
{date:'26-Mar-12',close:66.98, value2: 87} */
]


let divWidth = $("#saleChartDiv").width();
let divHeight = $("#saleChartDiv").height();


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

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

var bisectDate = d3.bisector(function(d) { return d.date; }).left;

// set the ranges
let x = d3.scaleTime().range([0, width]);
let y =...