JSFiddle - React, Tailwind, and code Playground

by Sujit Kumar Singh

HTML

<script src="https://d3js.org/d3.v3.js"></script>
<script src="https://cdn.rawgit.com/novus/nvd3/v1.8.5/build/nv.d3.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.css">
<div id="line-chart" width="400"></div>
<div id="historical-chart" width="400"></div>

CSS

.nvd3 .nv-y .nv-axis .tick.zero line {
    stroke: #000; // black line for the x axis
}
.nvd3 .nv-x .nv-axis path.domain, .nvd3 .nv-y .nv-axis .tick.zero line {
	// black line for the x axis
    stroke: #000;
    stroke-opacity: 1 !important;
}

JavaScript

var chartHeight = 300;
var chartWidth = 400;
var chartData = [{"key":"","values":[{"key":"2017-06-17","value":93.7125748502994},{"key":"2017-06-18","value":94.73684210526315},{"key":"2017-06-19","value":0.2},{"key":"2017-06-20","value":93.05912596401028},{"key":"2017-06-21","value":92.87531806615776},{"key":"2017-06-22","value":90.59139784946237},{"key":"2017-06-23","value":95.37275064267352},{"key":"2017-06-24","value":94.05684754521964},{"key":"2017-06-25","value":50},{"key":"2017-06-26","value":88.23529411764706},{"key":"2017-06-27","value":91.28440366972477},{"key":"2017-06-28","value":92.21556886227546},{"key":"2017-06-29","value":0.01941747572816},{"key":"2017-06-30","value":94.0828402366864}]}];

addLineChart(chartData);
addHistoricalChart(chartData);

function addLineChart(chartData){
	nv.addGraph(function() {
		var chart = nv.models.lineChart()
			.margin({top: 20, right: 35, bottom: 60, left: 60})
			.interpolate("monotone") // Draws smooth paths
			.clipEdge(false)
			.showLegend(false)
			.x(function(d){ return d3.time.format("%Y-%m-%d").parse(d.key)})
            .y(function(d){ return Math.round(d.value) })
			
		chart.yAxis
            .showMaxMin(true)
            .tickFormat(function(d){return d3.format("d")(d)})

        chart.xAxis
            .showMaxMin(true)
            .tickFormat(function(d) { return d3.time.format('%b %d %Y')(new Date(d)) })

		d3.select('#line-chart').append('svg')
			.attr('height', chartHeight)
			.attr('width', chartWidth)
			.attr('class', 'line-chart')
			.datum(chartData)
			.call(chart);

		nv.utils.windowResize(chart.update);
		return chart;
	});
}

function addHistoricalChart(chartData){
	nv.addGraph(function() {
		var chart = nv.models.historicalBarChart()
			.margin({top: 20, right: 35, bottom: 60, left: 60})
			.clipEdge(false)
			.padData(true)
			.x(function(d){ return d3.time.format("%Y-%m-%d").parse(d.key)})
            .y(function(d){ return Math.round(d.value)...