Angular-NVD3 Stacked Bar Chart With Line

Question

I'm new to D3, NVD3 and Angular-NVD3. I need to create a chart that looks similar to this, using Angular-NVD3:

SO question: NVD3 Stacked Bar Chart Plus Line Overlapped

(there's a JS Fiddle on the SO question).

Angular-NVD3 has two charts which each accomplish most of what I need, but not all of it:

Those would be the MultiBar and the MultiChart. (http://krispo.github.io/angular-nvd3/#/quickstart) Examples:

That is, I need a stacked bar chart with a line (or lines) overlaid on top of the bar chart. I believe that to do this, one must use a "multiChart" instead of "multiBar" chart. (Please correct me if I'm wrong).

The SO example above modifies the NVD3 library, which I would like to avoid. After researching, I can see why they chose this approach.

nv.d3.js (version 1.8.2), for the multiChart object, Lines 9068-9069 :

    bars1 = nv.models.multiBar().stacked(false).yScale(yScale1),
    bars2 = nv.models.multiBar().stacked(false).yScale(yScale2),

If you change these lines to .stacked(true), it does stack the bars.

How can I use Angular-NVD3 and accomplish what I need without changing the library?

Ideally the solution would be pure configuration. The next most ideal situation would be to set the "stacked" value at runtime from inside my enclosing component, but I can't seem to get access to the object.

I would like to avoid a highly intricate solution if possible because the whole point of these abstractions is to avoid such complexities. However, all solutions are welcome.

alwayslearning alwayslearning · Accepted Answer · 2016-03-17T16:13:15

I found the answer:

you can change the stacked value in the callback() event handler, specified in your config:

chart: {
            type: 'multiChart',
...
            callback: function (chart) {
                chart.bars1.stacked(true);
                chart.bars2.stacked(true);
                chart.update();
            },
...
        }
    };

Angular-NVD3 Stacked Bar Chart With Line

2 Answers