Closed onionhammer closed 3 years ago
What was the old code you were using?
@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
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:
0.64:
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.
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
@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.
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
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
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.
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
@wyze Awesome, that looks great!
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.
Long story short, I can't seem to get the legend to go the same way as the bars.