Stacked series line chart with dc.js (stacked area)

Question

Is it possible to combine dc.seriesChart() with the .stack() mixin? I haven't found any examples and simply don't know how to start...

To be clear, I would like to find a compromise between

dynamic multi-series as in the series example, where embedded sub-charts are generated as a function of the crossfilter group

and

area stacking as shown in the demo dc.js area chart, where the variables to be stacked are statically added (no Series used)

Ideally, I would like to implement something like NVD3's stacked area chart with cross-filter support.

Thanks for any pointers and suggestions!

E.

Gordon Gordon · Accepted Answer · 2014-10-04T04:13:54

You are correct in noticing that the stack mixin and series charts are designed differently and are not mixins in the sense of being able to combine them differently.

It is more like the bar and line charts are derived from the stack chart base class, and the series chart is a shortcut to create a composite, multilayered chart.

It sounds like you want the stacked line / area chart but you want to add your stacks dynamically.

Although dc.js won't add them automatically for you, you can just write a loop to add the stacks from your data, e.g. assuming your values are reduced to fields A, B, and C:

var stacks = {'A', 'B', 'C'};
stacks.forEach(function(s) { 
    chart.stack(s, function(d) { return d.value[s]; });
});

And dc.js has no way to remove stacks, but it can hide them.

So, it takes some manual coding, and dc.js could be designed more consistently, but I think you can get the effect you're looking for.

Stacked series line chart with dc.js (stacked area)

1 Answers