Legend key in chart

[paolodamico]

Is your feature request related to a problem?

Currently we show the legend table describing each graph series at the bottom of the graph. This is not ideal because a) you have to know it's there, b) you have to scroll which makes visualization more difficult and c) doesn't work well for screenshots.

Describe the solution you'd like

I'd like us to introduce a legend key within the graph. See one example below.

Describe alternatives you've considered

Keep only the legend table at the bottom.

Additional context

Related to #4492.

Thank you for your feature request – we love each and every one!

[corywatilo]

I played with a few different options for this. (I built them in my newer experimental UI, but they port pretty easily to what we have today.)

1. Side legend

We only need a legend if there is >1 thing being graphed. When there is, we can reduce the width of the graph to fit the legend.

One benefit here is that there is a nice, consistent alignment, which wouldn't happen if the labels were listed horizontally above or below (like in the next two options).

2. Legend below

The most standard option, the labels grow from the middle. Middle alignment could, of course, get weird with long labels

3. Legend above

I actually sort of like this version because it puts the labels from and center. In this case, we'd just allow enough whitespace above where the graph actually starts. It's designed to look like it's just dropped in the available space, but the space would grow as needed.

---

Open questions

1. What do the edge cases look like here? The current table view does a good job of truncating labels, so it doesn't seem like the names would ever get too long.
2. "But what if there are 1237832 items graphed? Versions 2 and 3 with centered labels look fine with any reasonable number of graphed items. If there are more, they will wrap and won't be perfectly aligned. I'm not too concerned with this since it's sort of an edge case. But if we wanted to solve it, we could either: a) use left alignment when there are >X elements, or b) sort of inline-block labels with a fixed width, likely with left alignment, so they're all spaced evenly

[paolodamico]

My thoughts:

1. I would personally go with (3). With (1) I get the sense we're losing valuable prime space for the main graph and (2) feels too close to the verbose table that shows details on all series.
2. Not sure about the visual/icon (the rounded line thing) for each graph series. I get the sense that it's not in line with our current design.
3. I think it might be worth considering showing a bit more information on the series names, as we do in tooltips (see New tooltips UI #4156 #4651) and now the table at the bottom too. For instance, we show the series letter identifier (if there's more than one series), information on the math aggregator (if it's set), or breakdown information (if applicable). For consistency, it'd be great if we do the same thing here.
4. In terms of edge cases, I think we should definitely truncate labels. At some point we need to consider what to do when there are just too many lines in a graph (sort of the "Other" category), but today I'm thinking we'll have to show the labels for all series (probably in multiple lines). In this case I might actually go with (2) otherwise the main graph will not be above-the-fold when there are multiple graph series.

POV?

[corywatilo]

Yep, agreed @paolodamico. Top is best, lines were really more intended for this visual refresh, so adapting them to what we have today is perfect. I added a little more info in these, spaced them evenly, and truncated the middle one to get a sense for what it would look like.

Do you think you have enough to run with it within the context of the current design?

[paolodamico]

This is great, thanks @corywatilo! I'll tweak the UI a bit (for the current version) to get your thoughts before we can mark this as ready to implement.

[clarkus]

I was working on some chart patterns and put in a few rounds on legends. One thing to think about is scale. In some cases, visualizations might have a really large number of metrics. A conditionally displayed legend might be a good solution for a consistent means of translating a chart. Also worth noting that the tooltip for some charts is mostly a repeat of the legend information, so we have multiple components contributing to this solution.

[paolodamico]

Yes!! Really love this legend key, let's make it happen! Will tag this as a good first issue as I think with the design (and the already existing tooltip logic) it can be fairly straightforward to pick up.

[paolodamico]

@clarkus @mariusandra what are your thoughts on having this on insights? I'm not convinced is solving a real problem, as we've haven't had more feedback from users on this.

[mariusandra]

This would definitely help people who are making screenshots of insights, and should probably be tracked in the "nail analytics" doc, but we definitely have higher priorities to tackle first.

[clarkus]

It depends. I can see it adding value in some scenarios, while being completely redundant in others. I think focusing on other priorities first is a good call.

[paolodamico]

Legend key is live!