dc.js grouped bar chart

Question

I need to do this grouped bar chart like this one but the .renderType() doesn`t work. Are there any solutions to do a chart like this? Thanks!

Answer 1

You're right, it's non-trivial to find a branch or fork of dc.js and use it in your project.

The PR you linked is rather old and was replaced by this one. Unfortunately all grouped bar implementations had design shortcomings and none are ready to merge, which is why we still have to use forks or branches of the code.

Instead of renderType the API on this fork changed to

.groupBars(true)

The fork and branch for the new PR are here:

https://github.com/jaklub/dc.js/tree/grouped-or-stacked-bars

The artifacts (dc.js and dc.css) can be found on the grouped-or-stacked-bars-artifacts branch.

One way to fetch them is using jsdelivr:

https://cdn.jsdelivr.net/gh/jaklub/dc.js@grouped-or-stacked-bars-artifacts/dc.js
https://cdn.jsdelivr.net/gh/jaklub/dc.js@grouped-or-stacked-bars-artifacts/dc.css

Or, if you're using npm, you can declare the dependency as so:

"dc": "[email protected]:jaklub/dc.js#grouped-or-stacked-bars-artifacts"

Shorter version for any recent version of npm:

"dc": "jaklub/dc.js#grouped-or-stacked-bars-artifacts"

Although this is a fork of the last major version (3) of dc, it's compatible with the latest d3, as demonstrated in this demo fiddle.

Clearly you need a lot more horizontal space in order to display grouped bars, but that's a separate issue.