question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Why are tooltips/legends ordered opposite to input data?

See original GitHub issue

I haven’t been using Nivo long, so forgive my ignorance if the answer should be obvious.

The Nivo Line docs use input data that looks like this:

[
  { "id": "japan",   "data": [] },
  { "id": "france",  "data": [] },
  { "id": "us",      "data": [] },
  { "id": "germany", "data": [] },
  { "id": "norway",  "data": [] }
]

However, the legend on the right (and the tooltip, when setting enableSlices to x) reverses the input order, listing norway first.

Digging in, I found the useSlices hook currently includes a slicePoints.reverse() when building the array of points for each slice. I’m guessing that has something to do with it.

That .reverse() must have a purpose, but I can’t figure out what it is. Does it make more sense for other chart types? It’s not hard to reverse the input to get the desired legend/tooltip order, but just felt odd.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:4
  • Comments:6

github_iconTop GitHub Comments

1reaction
bjarkehscommented, Jun 25, 2021

I just experienced this as well. It seems rather counter intuitive especially given how some of the other graphs such as Bar does not reverse them.

0reactions
PeteTangcommented, Aug 26, 2021

Experienced this as well, It’s not hard to reverse the input to get the desired legend/tooltip order, but i have to also change the color of the graph to align with bar chart in the same page

Read more comments on GitHub >

github_iconTop Results From Across the Web

Why are tooltips/legends ordered opposite to input data?
I haven't been using Nivo long, so forgive my ignorance if the answer should be obvious. The Nivo Line docs use input data...
Read more >
Stacked Area Chart Legend & Tooltip Order - Reversed
However, in the legend and tooltip, the order is reversed. Customer with biggest volume appared at the top of the list and that...
Read more >
Highcharts - Change legend index order - Stack Overflow
The items in the shared tooltip will be sorted reversely. ... After applying some CSS it will reverse the order of legends.
Read more >
Displaying tooltips - Cloudera Documentation
Displaying tooltips. CDP Data Visualization allows you to enable tooltips in Sparklines visuals. This setting is available on all visuals.
Read more >
Format Titles, Captions, Tooltips, and Legends - Tableau Help
A legend card appears in the worksheet when you encode marks by dropping them on the Color ... You can enter a new...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found