nvD3 : want to Create a DualAxisBarChart using NVD3

Question

I want to create a DualAxisBarchart but kind of stuck. Tried many way but actually am able to create Two yAxis but instead to create two separate bar its creating two bar at the same place please suggest me some approach am creating this using multichart() function

Answer 1

I have not used nvd3, however I have created a dual axis bar chart using d3. In the code below I am assuming the variable height, x, svg are already defined. The only differences are the ranges for the upperY and lowerY functions and how the lowerBars y and height are defined. I really hope this helps

var upperY = d3.scale.linear().range([height / 2, 0]);
var lowerY = d3.scale.linear().range([height / 2, height]);

var upperYAxis = d3.svg.axis()
    .scale(upperY)
    .orient("left");

var lowerYAxis = d3.svg.axis()
    .scale(lowerY)
    .orient("left");

svg.append("g")
    .attr("class", "y axis")
    .call(upperYAxis);

svg.append("g")
    .attr("class", "y2 axis")
    .call(lowerYAxis);

var upperBars = svg.selectAll(".upperBar")
    .data(upperBarData)
    .enter()
    .append("rect")
    .attr("class", "upperBar")
    .attr("x", function(d) { return x(d.index); })
    .attr("width", x.rangeBand())
    .attr("y", function(d) { return upperY(d.value); })
    .attr("height", function(d) { return height / 2 - upperY(d.value); });

var lowerBars = svg.selectAll(".lowerBar")
    .data(lowerBarData)
    .enter()
    .append("rect")
    .attr("class", "lowerBar")
    .attr("x", function(d) { return x(d.index); })
    .attr("width", x.rangeBand())
    .attr("y", function(d) { return height / 2; })
    .attr("height", function(d) { return lowerY(d.value) - height / 2; });