Nivo: Grouped and stacked bar charts

[JelleBlaauw]

Is it possible to combine grouped and stacked behavior in bar charts, like below image?

If not, I would like to request this feature.

Thanks!

[plouc]

No it's not.

[JelleBlaauw]

Alright. Are you planning on implementing this? And if not, could you give me some pointers on how I could get started with implementing it?

[plouc]

I'm not planning to implement this as there's already support for stacked/grouped/reversed, I'm afraid the component will become very bloated, and some combinations will probably not play well together.

I was thinking of splitting the Bar chart component into several ones, like Bar, GroupedBar, StackedBar… so maybe another GroupedStackedBar.

Also the @nivo/bar package hasn't been migrated to the latest architecture, using hooks for more flexibility, so first it'll need to be updated.

So the steps would be:

• migrate to new architecture
• provide several components
• add this new component

Unfortunately It's not trivial, and requires quite a bit of work :)

[plouc]

For now, what you could do is using the existing Bar component in grouped mode and use a custom bar item which handle the stacking.

[JelleBlaauw]

Alright, seems like a plan. Thanks a lot!

[jackgilbertx]

@JelleBlaauw were you ever able to implement this?????I would really appreciate if you would share your code/method for achieving this feature. Please respond in another comment if so.
Thanks!

[JelleBlaauw]

@jackgilbertx No, unfortunately not. I had to focus on another project and switched to react-vis instead.

[pawel-kowalczyk7]

@plouc Are you going to implement this feature in close future? 'in grouped mode and use a custom bar item which handle the stacking.' So is this possible to set chart as grouped and have stacking bars?

[timramone]

It's so sad you doesn't support this usecase =(

Custom bar component seems like a hack because the position of the legend inside the component and the tooltip would be broken. All of these features should support stacked groups to work correctly.

[john-curry871]

This would be a seriously valuable enhancement. One of those requirements that seems to come up again and again

[rmonnier9]

Hi everyone !

First of all, thanks all contributors for this pretty cool open source project :)
I've tried many other libraries and I ultimately picked this one. Fast, beautiful and great api.

I'm seriously considering coding group and bar chart, because I need it as well.

@plouc Are you already working on it? Or would you have any advice before I start doing it ?

[rmonnier9]

It seems that we essentially need to add a file in this folder:
https://github.com/plouc/nivo/tree/master/packages/bar/src/compute

The main problem I see is that we have to change the format of input data in order to know which bars must be stacked together.

To set the color, the documentation use:
data={"hot dog": 163, "hot dogColor": "hsl(225, 70%, 50%)"}
so maybe we could use something like
data={"hot dog": 163, "hot dogStackId": 1}

[stale[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!