JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://rawgit.com/novus/nvd3/master/build/nv.d3.css">
<script src="https://rawgit.com/novus/nvd3/master/build/nv.d3.js"></script>
<div id="chart">
<svg></svg>
</div>
CSS
#chart svg {
height: 400px;
}
JavaScript
var data = [{
'key': 'foo',
'bar': true,
'color': 'skyblue',
'values': [
[1431993600000, 31.6882],
[1432080000000, 76.1706],
[1432166400000, 76.2297],
[1432252800000, 75.1944],
[1432339200000, 75.1536],
[1432425600000, 74.528],
[1432512000000, 75.7265],
[1432598400000, 75.8659],
[1432684800000, 74.6283],
[1432771200000, 73.3533]
]
}, {
'key': 'bar',
'color': 'steelblue',
'values': [
[1431993600000, 0.0002997961386257345],
[1432080000000, 0.0004418193656404055],
[1432166400000, 0.0003122142681920564],
[1432252800000, 0.00031651293181407124],
[1432339200000, 0.0003845457835685849],
[1432425600000, 0.00031934306569343066],
[1432512000000, 0.0005163317993040745],
[1432598400000, 0.00042575122683577205],
[1432684800000, 0.00025057518394496457],
[1432771200000, 0.00041715914621428076]
]
}];
nv.addGraph(function () {
var chart = nv.models.linePlusBarChart()
.margin({
top: 30,
right: 60,
bottom: 50,
left: 70
})
.x(function (d, i) { return i; })
.y(function (d, i) { return d[1]; })
.options({focusEnable: false});
chart.xAxis.showMaxMin(true)
.tickFormat(function (d) {
var dx = data[0].values[d] && data[0].values[d][0] || 0;
return d3.time.format('%x')(new Date(dx));
});
chart.y1Axis.tickFormat(d3.format(',f'));
chart.y2Axis.tickFormat(function (d) {
return d3.format('g')(d)
});
chart.bars.forceY([0, 200]);
chart.lines.forceY([0]);
d3.select('#chart svg')
.datum(data)
.transition()
.duration(0)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});