JSFiddle - React, Tailwind, and code Playground

by Shahabaz Shafi

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.5/dc.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.0.0-beta.31/dc.js"></script>
<div id="container">
  <div id="line-chart">
    <strong>Nearest point values at axes</strong>
  </div>
</div>

SCSS

line.tracking,
text.texttip {
  stroke-opacity: 0;
  fill-opacity: 0;
  fill: gray;
  font-size: 11px;
  stroke: gray;
  stroke-dasharray: 2 5;
  
  transition: .25s all;
}
svg:hover {
 
  line.tracking {
    stroke-opacity: 1;
    stroke-width: 1px;
  }

  text.texttip {
    fill-opacity: 1;
  }
}

JavaScript

var data = [
  {date: "2011-01-01T16:17:54Z", quantity: 2, total: 190},
  {date: "2011-01-01T16:28:54Z", quantity: 1, total: 300},
  {date: "2011-01-04T16:28:54Z", quantity: 1, total: 300},
  {date: "2011-01-05T16:30:43Z", quantity: 2, total: 90},
  {date: "2011-01-06T16:48:46Z", quantity: 2, total: 90},
  {date: "2011-01-09T16:53:41Z", quantity: 2, total: 90},
  {date: "2011-01-10T16:14:06Z", quantity: 1, total: 100},
  {date: "2011-01-12T16:58:03Z", quantity: 2, total: 90},
  {date: "2011-01-14T17:07:21Z", quantity: 2, total: 90},
  {date: "2011-01-17T17:22:59Z", quantity: 2, total: 90},
  {date: "2011-01-19T17:25:45Z", quantity: 2, total: 200},
  {date: "2011-01-19T17:29:52Z", quantity: 1, total: 200}
];

data.forEach(function(d) {
  var date = new Date(d.date);
  d.formattedDate = new Date (date.toDateString());
});

var ndx = crossfilter(data);

var lineChart = dc.lineChart("#line-chart");
var dateDimension = ndx.dimension(function (d) {
  return d3.time.day(d.formattedDate); 
});
var totalGroup = dateDimension.group().reduceSum(function(d) {
  return d.total;
});

var bisectDate = d3.bisector(function(d) {
  return d.key;
});	
var dateFormat = d3.time.format("%Y-%m-%d");

var height = 200;
var width = 400;
var margins = {top: 30, right: 50, bottom: 30, left: 50}

lineChart
  .width(width)
  .height(height)
  .yAxisPadding('10%')
  .xAxisPadding(1)
  .x(d3.time.scale())
  .xUnits(d3.time.day)
  .brushOn(false)
  .elasticY(true)
  .elasticX(true)
  .dimension(dateDimension)
  .group(totalGroup)
  .margins(margins)
  .renderDataPoints({radius: 3})
  //.xyTipsOn(false)
  .on('renderlet', function(chart) {

	})
  .on('postRender', function(chart) {
    var svgG = chart.svg().append('g');
    var g = chart.chartBodyG().append('g');

		var xLine = g.append('line').attr('class', 'tracking x')
      .attr('x1', 0).attr('x2', 0)
      .attr('y1', 0).attr('y2', height)
      .attr('transform', 'translate(0,0)')
      
    var yLine = g.append('line').attr('class',...