Nvd3.js - Adding multiple y-axis to cumulative chart

Question

I need to add multiple y-axis to my cumulative Nvd3 chart, does anyone know what part of the library's code I'll need to modify?

Even better would be if you have done this yourself and could provide a Jsfiddle.

Any suggestions would be appreciated.

Iridium

are you planning too change the nvd3 library...in such a case you will never be able to upgrade. – Prostatitis

Thanks I got the same Situation Also. – Ice

@Iridium any update on this?? I am in same situation – Orthogonal

@Orthogonal No, I had to get it done manually – Iridium

@Iridium It would really helpful, if you share the example code – Orthogonal

@Orthogonal paid someone to do it so it wasn't me :) – Iridium

Answer 1

There are only specific chart types that have multi Y-axis functionality.

This isn't available for the Cumulative Line Chart.

It is however available for the Multi-chart. There is an example on the Angluar NVD3 home page here but it shows the example with bars and lines.

I forked the plunker example from the home page and changed the series types to all line to show you how you could use the multi to achieve the same result as the cumulative line chart.

( I also changed the data set to simplify the example)

Pluker Example

The first thing is to add the options for the multiple axis:

 $scope.options = {
            chart: {
                type: 'multiChart',
                height: 450,
                margin : {
                    top: 30,
                    right: 60,
                    bottom: 50,
                    left: 70
                },
                color: d3.scale.category10().range(),
                //useInteractiveGuideline: true,
                transitionDuration: 500,
                xAxis: {
                    tickFormat: function(d){
                        return d3.format(',f')(d);
                    }
                },
                yAxis1: {
                    tickFormat: function(d){
                        return d3.format(',.1f')(d);
                    }
                },
                yAxis2: {
                    tickFormat: function(d){
                        return d3.format(',.1f')(d);
                    }
                }
            }
        };

Define your data:

 $scope.data = [{key: 'series1', type: "line", yAxis: 1, values:[{x: 10, y: 20}, {x: 20, y: 35}, {x: 30, y:18}]},
        {key: 'series2',  type: "line", yAxis: 1,values:[{x: 10, y: 12}, {x: 20, y: 26}, {x: 30, y: 15}]},
        {key: 'series3',  type: "line", yAxis: 2,values:[{x: 10, y: 0.75}, {x: 20, y: 0.9}, {x: 30, y: 0.8}]},
        {key: 'series4',  type: "line", yAxis: 2,values:[{x: 10, y: 0.2}, {x: 20, y: 0.3}, {x: 30, y: 0.4}]}]

Note the type and yAxis keys are set here against each series.

Set your <div> as normal:

 <nvd3 options="options" data="data"></nvd3>

And that's it!

You will get the same chart as you would with a Cumulative Line Chart but the ability to set multiple axis.

Backbite

Answer 2

If you are referring to adding multiple y axis to single chart that is already available in NVD3 line and bar chart. Partial code snippet shown below.

      chart.y1Axis
          .tickFormat(d3.format(',f'));

      chart.y2Axis
          .tickFormat(function(d) { return '$' + d3.format(',f')(d) });

Meiosis