search

plouc / nivo

nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries
https://nivo.rocks
MIT License
13.16k stars 1.03k forks source link

Reverse bar chart legend #1285

Closed onionhammer closed 3 years ago

onionhammer commented 3 years ago

Bar charts underwent some changes and the somewhat hacky way I was getting the legends and bars to order correctly before no longer works, so now I'm trying to just follow the examples and get the legends in the same order as the bars and I'm having issues.

image

Long story short, I can't seem to get the legend to go the same way as the bars.

wyze commented 3 years ago

What was the old code you were using?

onionhammer commented 3 years ago

@wyze I was setting the 'keys' attribute to an array with the values in the right order, but after upgrading to 0.64 every item in the legend was the same color and the chart was empty.

So it was a chart where keys was in the opposite order as the data

onionhammer commented 3 years ago

Here's a repro

Vertical chart has the legend in the right order, horizontal is reversed

https://codesandbox.io/s/nivo-basic-demo-forked-ru4v8

index2 shows the way I was doing it, you can see if you change package.json's entry point to 'index2.js'. If you upgrade to nivo 0.64, it will break.

0.63: image

0.64: image

wyze commented 3 years ago

Thanks for that sandbox, it is very helpful. Looks to be 2 different issues going on here. I've updated the sandbox to at least get your data displaying in 0.64, or 0.65 now. https://codesandbox.io/s/nivo-basic-demo-forked-uyxko?file=/src/index2.js

I had to add null values for all the keys, definitely a bug and I'll look into a PR shortly. The legend colors should receive the same value from the bar, but that doesn't seem to be happening, so I will need to look at that as well.

onionhammer commented 3 years ago

Another nice to have might be to add some more layout options. Horizontal goes from left to right, but vertical goes from bottom to top. This could be resolved with a "vertical-reverse" option, and a "horizontal-reverse" option (for consistency) to flip the order of bars

plouc commented 3 years ago

@onionhammer, there's already a reverse option on the chart, I think this could be a bit confusing. I think it would be nice to add a way to sort the legends the way we want.

onionhammer commented 3 years ago

Any update on this issue? I'm holding off upgrading to the latest version of nivo due to this order issue. Would switch to a funnel if it supported legends

wyze commented 3 years ago

You can implement in a custom layer and have full control over the legend: https://codesandbox.io/s/nivo-basic-demo-forked-nptio?file=/src/index.js

taniarascia commented 3 years ago

It's a pretty complex workaround to use the proposed sandbox in order to get the legend to match the chart. I also notice the colors are reversed on the horizontal bar chart.

For example, if I do:

colors=['red', 'blue', 'yellow']

My horizontal bar chart will be "yellow, blue, red", from top to bottom, but the legend will be "red, blue, yellow", so there is some fundamental mismatch going on. By default the legend and chart do not match.

wyze commented 3 years ago

Any update on this issue? I'm holding off upgrading to the latest version of nivo due to this order issue. Would switch to a funnel if it supported legends

@onionhammer It will be fixed in the next release. I have updated the logic in the typescript migration PR. Here is your sandbox using that code: https://codesandbox.io/s/nivo-basic-demo-forked-30vct?file=/src/index.js

onionhammer commented 3 years ago

@wyze Awesome, that looks great!