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>
<div id="dashbordConsmLine" style="width:100%; height : 150px;">

</div>

CSS

.xAxisDashboardCF{
  display: none;
}

.yAxisDashboardCF{
  display: none;
}
.xAxisDashboardCF line,.yAxisDashboardCF line{
  stroke: #eee
}
.xAxisDashboardCF text,.yAxisDashboardCF text{
  fill: #eee
}
.xAxisDashboardCF path,.yAxisDashboardCF path{
  stroke: #eee
}

 #tooltipDashboardConsm {
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 5px;
    width : 70px;
    height: auto;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    text-align: center;
    font-size: 12px;
  }

JavaScript

var data = [{
"date": "2018/06/01",
"value": 450
},{
"date": "2018/06/02",
"value": 410
},{
"date": "2018/06/03",
"value": 480
},{
"date": "2018/06/04",
"value": 547
},{
"date": "2018/06/05",
"value": 600
},{
"date": "2018/06/06",
"value": 574
},{
"date": "2018/06/07",
"value": 325
}];

var margin = {
     top: 20,
     right: 50,
     bottom: 50,
     left: 50
   };
 
var tooltip = d3.select('body').append('div')
.attr('id', 'tooltipDashboardConsm');
     
var svg = d3.select("#dashbordConsmLine").append("svg")
   .attr("preserveAspectRatio", "xMinYMin meet")
   .attr("viewBox", "0 0 "+($("#dashbordConsmLine").width())+" "+($("#dashbordConsmLine").height()))
     
var g = svg.append("g")
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
     
let width = $("#dashbordConsmLine").width() - margin.left - margin.right,
   height = $("#dashbordConsmLine").height() - margin.top - margin.bottom;
   
var valueline = d3.line()
    .x(function (d) { return x(d.date); })
    .y(function (d) { return y(d.value); });
    
var parseTime = d3.timeParse("%Y/%m/%d");   
 data.forEach(function (d) {
   d.date = parseTime(d.date);
   d.mpan1Cost = +d.value;
});

var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
let xExtent = d3.extent(data, function (d) { return d.date; }),
xRange = xExtent[1] - xExtent[0];
/*console.log(xExtent[1])
console.log([xExtent[0] - (xRange * 0.05), xExtent[1] + (xRange * 0.05)]) */
/* console.log([d3.timeDay.offset(d3.min(xExtent), -1), d3.max(xExtent)]) */
/* 
x.domain([d3.timeDay.offset(d3.min(xExtent), -1),d3.timeDay.offset(d3.max(xExtent), 1)]); */

x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([d3.min(data, function (d) {
        return Math.min(d.value) / 1.5;
      }), d3.max(data, function (d) {
        return Math.max(d.value) * 1.5;
      })]).nice();
      
var xVal = d3.axisBottom(x)
    .ticks(d3.timeDay,1)
    .tickFormat(d3.timeFormat('%d'))
   ...