JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://nvd3.org/assets/lib/d3.v3.js"></script>
<script src="http://nvd3.org/assets/js/nv.d3.js"></script>
<link rel="stylesheet" href="http://nvd3.org/assets/css/nv.d3.css">
<div id="chart1" class='with-3d-shadow with-transitions'>
<svg> </svg>
</div>
CSS
body {
overflow-y:scroll;
}
text {
font: 12px sans-serif;
}
#chart1 svg {
height: 500px;
width: 900px;
margin: 10px;
min-width: 100px;
min-height: 100px;
}
JavaScript
var testdata = [{
"key" : "Bar Chart",
"bar" : true,
"color" : "#ccf",
"values" : [[1136005200000, 1271000.0], [1138683600000, 1271000.0], [1141102800000, 1271000.0], [1143781200000, 0], [1146369600000, 0]]
}, {
"key" : "Line Chart1",
"color" : "#c2f",
"values" : [[1136005200000, 71.89], [1138683600000, 75.51], [1141102800000, 68.49], [1143781200000, 62.72], [1146369600000, 70.39]]
}, {
"key" : "Line Chart2",
"color" : "#cff",
"values" : [[1136005200000, 89], [1138683600000, 51], [1141102800000, 49], [1143781200000, 72], [1146369600000, 39]]
}].map(function(series) {
series.values = series.values.map(function(d) { return {x: d[0], y: d[1] } });
return series;
});
var chart;
nv.addGraph(function() {
chart = nv.models.linePlusBarChart()
.margin({top: 30, right: 60, bottom: 50, left: 70})
.x(function(d,i) { console.log(d); console.log(i); return i })
.color(d3.scale.category10().range());
chart.xAxis
.tickFormat(function(d) {
console.log(d);
var dx = testdata[0].values[d] && testdata[0].values[d].x || 0;
console.log(dx);
return dx ? d3.time.format('%x')(new Date(dx)) : '';
})
.showMaxMin(false)
.axisLabel("X-axis Label");
chart.y1Axis
.tickFormat(d3.format(',f'))
.axisLabel("y1Axis Label");
chart.y2Axis
.tickFormat(function(d) { return '$' + d3.format(',.2f')(d) })
.axisLabel("y2Axis Label");
chart.bars.forceY([0]).padData(false);
//chart.lines.forceY([0]);
d3.select('#chart1 svg')
.datum(testdata)
.transition().duration(500).call(chart);
nv.utils.windowResize(chart.update);
chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
return chart;
});