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.

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.

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) });