How to force usage of specific yAxis in LinePlusBarChart of nvd3

Question

The nvd3 linePlusBarChart allows to use multiple yAxis, which is also shown in their example here (and in the angular-nvd3 example here). In the examples (see plunkers), they simply use two series of data and they are automatically mapped to one of the yAxis each. For me, this doesn't happen though.

My data looks like this:

[
  {
    "key": "Series 1",
    "bars": true,
    "values": [ [1425942000, 20], [1425942040, 25], ... ]
  },
  {
    "key": "Series 2",
    "bars": true,
    "values": [ [1425942000, 80], [1425942040, 40], ... ]
  },
  {
    "key": "Series 3",
    "bars": true,
    "values": [ [1425942000, 37], [1425942040, 55], ... ]
  },
  {
    "key": "Series 4",
    "values": [ [1425942000, 20132.44], [1425942040, 40032.93], ... ]
  }
]

So from the data it should be clear that there needs to be a second yAxis to be used for the fourth series because of the huge difference in scale.

The chart configuration looks like this (be aware that it is a configuration for angular-nvd3):

{
    type: 'linePlusBarChart',
    height: 500,
    margin : {
        top: 50,
        right: 75,
        bottom: 50,
        left: 50
    },
    xAxis: {
        axisLabel: 'Time',
        tickFormat: function(d) {
            return d3.time.format('%Y/%m/%d')(new Date(d));
        }
    },
    x2Axis: {
        tickFormat: function(d) {
            return d3.time.format('%b %Y')(new Date(d));
        }
    },
    y1Axis: {
        axisLabel: 'Just some numbers here',
        axisLabelDistance: -10,
        tickFormat: function(d) {
            return d3.format(',')(d);
        }
    },
    y2Axis: {
        axisLabel: 'Some money numbers',
        axisLabelDistance: 10,
        width: 100,
        tickFormat: function(d) {
            return '$ ' + d3.format(',.2f')(d);
        }
    },
    y3Axis: {},
    y4Axis: {},
    bars: {
        forceY: [0],
        padData: true
    },
    bars2: {
        forceY: [0],
        padData: true
    }
}

However, I can't seem to find out how to force some data series to attach themselves to a certain yAxis. Currently, all four series are attached to the right axis.

I already tried adding a yAxis: 1 (or yAxis: 2) attribute on the series objects, which is the way it is done for other chart types, but it doesn't work.

So if anyone has some advice for me, I'd really appreciate it.

Bonus question: Is there some way to achieve the same as useInteractiveGuideline: true does on lineChart for the linePlusBarChart I want/need to use?

Answer 1

I found the mistake myself. The series should use bar: true and not bars: true, then both yAxis are used.

[
  {
    "key": "Series 1",
    "bar": true,   <-- instead of `"bars": true`
    "values": [ [1425942000, 20], [1425942040, 25], ... ]
  },
  ...
]