JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.0.0-beta/nv.d3.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.9/d3.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.js"></script>
<div id="chart">
<svg></svg>
</div>
CSS
#chart svg {
height: 400px;
}
JavaScript
var margin = {top: 50, right: 50, bottom: 120, left: 70};
var svg = "#chart svg";
var normalisedData = [{"key":"Data 1","type":"bar","yAxis":1,"values":[{"x":0,"y":6500},{"x":1,"y":8600},{"x":2,"y":17200},{"x":3,"y":15597},{"x":4,"y":8600},{"x":5,"y":814}]},{"key":"Data 2","type":"line","yAxis":2,"values":[{"x":0,"y":2},{"x":1,"y":2},{"x":2,"y":4},{"x":3,"y":6},{"x":4,"y":2},{"x":5,"y":5}]}];
var axisKeys = ["2014-Jan","2014-Feb","2014-Mar","2014-Apr","2014-May","2014-Jun"];
nv.addGraph(function() {
var chart = nv.models.multiChart()
.options({reduceXTicks:false})
.margin(margin)
.color(d3.scale.category10().range())
;
chart.xAxis
.tickFormat(function(d){
// If there is such element, return it
if(typeof axisKeys[d] !== "undefined"){
return axisKeys[d];
}
return "";
});
// Get normalised data for chart
var seriesData = normalisedData;
// Get max values for each axis
var minY1 = 0;
var minY2 = 0;
var maxY1 = 0;
var maxY2 = 0;
for(var i = 0; i < seriesData.length; i++) {
var _axis = seriesData[i].yAxis;
var _values = seriesData[i].values;
// Walk values and set largest to variables
for(var j = 0; j < _values.length; j++) {
// For maxY1
if(_axis == 1) {
if(_values[j].y > maxY1) {
maxY1 = _values[j].y;
}
}
// For maxY2
if(_axis == 2) {
if(_values[j].y > maxY2) {
maxY2 = _values[j].y;
}
}
}
}
// Set min, max values of axis
chart.yDomain1([minY1, maxY1]);
chart.yDomain2([minY2, maxY2]);
// Set chart
d3.select(svg)
.datum(seriesData)
.call(chart)
;
// Auto resize chart on window resize
nv.utils.windowResize(chart.update);
...