JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.4/dc.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/2.1.4/dc.css">
<div class="lineGraph">
  <div class="chart-container">
    <div id="chart"></div>
  </div>
</div>

CSS

.dc-chart {
  float: none;
}
.lineGraph g.axis.x g.tick text {
  text-anchor: end;
}
.lineGraph g.axis.x g.tick line,
.lineGraph g.axis.y g.tick line {
  display: none;
}
.grid-line.vertical line,
g.axis.y path.domain {
  opacity: 1;
  stroke: #cccccc;
}

JavaScript

var chartElementId = 'chart';
var chartWidth = 800;
var chartHeight = 400;
var margin = 30;
var lineColor = '#0000ff';
var data = [
  { key: 'Monday', value: 3000000 },
  { key: 'Tuesday', value: 3100000 },
  { key: 'Wednesday', value: 3500000 },
  { key: 'Thursday', value: 3070000 },
  { key: 'Friday', value: 4500000 },
  { key: 'Saturday', value: 3003030 },
  { key: 'Sunday', value: 5010000 }
];
var filteredGroup = {
  all: function() {
    return data;
  },
  ordering: function(item) {
    return data.map(function(d) {
      return d.key;
    }).indexOf(item.key);
  },
  xAxisTickValues: data.map(function(d) {
    return d.key;
  })
};
var chart = dc.lineChart('#'+chartElementId);
var ndx = crossfilter(data);
var dimension = ndx.dimension(function(item) {
	return item.value;
});
chart
  .width(chartWidth)
  .height(chartHeight)
  .ordering(filteredGroup.ordering)
  .colors([lineColor])
  .brushOn(false)
  .dotRadius(5)
  .elasticX(true)
  .xAxisPadding(0)
  .xyTipsOn(true)
  .margins({top: 10, right: 50, bottom: 100, left: 50})
  .renderDataPoints({radius: 5, fillOpacity: 1, strokeOpacity: 1})
  .clipPadding(40)
  .dimension(dimension)
  .renderVerticalGridLines(true)
  .group(filteredGroup);

_formatYAxis(chart, filteredGroup);
_formatXAxis(chart, filteredGroup, chartWidth);

chart.filter = function() {};
chart.render();

_rotateXAxisLabels(chart);
_formatVerticalGridLines(chart);
_repositionYAxis(chart);


function formatDecimal(val) {
  if (isNaN(val)) {
    return "0.00";
  }
  else if (val != null) {
    return d3.format(",.2f")(val);
  }
  else {
    return "N/A";
  }
}
  
function _formatYAxis(chart, filteredGroup) {
  var units = ['','K','M','B','T','Q'];
  chart.yAxis().tickFormat(function(v) {
    var i, unit, raw, formatted;
    for (i=0; i < units.length; i++) {
      unit = Math.pow(1000,i);
      if (v >= unit && v < Math.pow(1000,(i+1))) {
        raw = v/unit;
        if (raw === Math.floor(raw)) {
          formatted = raw + units[i];
       ...