Legend icons taking on more customization styling

[rshen91]

In #1227 the ability for legend icons to show the marker shape was added.

I'm opening this issue to track future changes and open a wider conversation with design on an ideal legend icon.

For instance, there was an issue with the fill of the legend icons, or the ideal shape for the default of legend icons for consideration.
The fill currently in #1227 takes on the color of the series vs the theme.
In previous commits in #1227, there is some computation for the strokeWidth with legend icons.

[cauemarcondes]

On APM UI we have a bubble chart and we'd like to match the styles of the legend with the style of the tick.

[monfera]

Hi @cauemarcondes we had some discussions that considered your use case (A), and also considered homogeneous marker cases, when there's only one type of marker on the chart, let's say, empty circles (B), and they're distinguished by color.

In your case (A) both the color and the shape of the markers of the series are distinct, which helps accessibility and readability. In this case, we've discussed about using the markers in the legend. So I think the above use case should be supported, because the shape already uniquely identifies the markers.

Whereas in case of homogeneous marker shapes with distinct colors (case B), we could end up with a bunch of empty circles of different color in the legend, which is an accessibility concern, because the thin outline of an empty circle has very little surface area, so it's much harder to make out or correlate the colors. And the shape doesn't help here (all are the same). For this case, we're planning to use a color swatch legend, ie. the legend items don't allude to the shape of the markers (which are all the same anyway), but only reveal the color. To increase readability and accessibility, one proposal is an area maximization, which, as the legend is granular, implies square, or squarish ink blots for the color key. With this proposal, the corner of the square would be rounded, so it doesn't attempt to convey a specific marker like square or circle, only the color.

(*) Mixed cases: on some visualizations, there may be different marker shapes, and within that, different marker colors. It's usually only sensible if the shape and the color encode different dimensions. For such cases, there'd eventually be two legends: one for the color, one for the shape. This would avoid lengthy, hard to read legends. Other systems do this too, eg. Tableau:

In the meantime we could chat about use cases, to ensure the legend fills the needs you work on, while also making it easy to distinguish categories.

We could also consider adding some "meat" to the currently thin shapes, so that the color is more perceptible.

We'd like to know more about the design choices for using

• different shapes (as opposed to just color)
• still using distinct colors (and what importance do you attribute to the color distinction)
• different types of shapes (filled vs empty)

[monfera]

The last pic in this PR comment is another example for a multidimensional legend, eventually useful on bubble plots

[cauemarcondes]

cc: @formgeist

[formgeist]

@monfera

Thanks for the detailed explanation and shared exploration of this challenge. Let me try and explain some of the thinking behind the design for the chart.

We are visualizing history (time compare feature) in the same way throughout the app to make it easier for users to identify for any chart we have. That's letting the primary color be dynamic or different by chart, but the comparison will show the same.

When tackling this scatter plot, we found that just having the dots separate by color just wasn't accessible. We attempted vastly different colors, but that would make the consistency across the app suddenly different which is why we found that we might just change the shape of the dots for the comparison. But even that wasn't good enough, so we change the style to be an outlined square so the different is not only color, shape but also filled/outlined. I agree that we can improve the stroke width and possible dot size to have the difference be more distinct. Ultimately, we also intend to group together dots to indicate clusters when users might have 1000s of instances in a given time range, so size difference would be used in another way.

Happy to schedule a chat about this - might be more beneficial than in this issue and relay the outcomes to the rest of the team.

[nickofthyme]

Related to #295

[nickofthyme]

On our weekly sync we briefly discussed this issue, to recap:

---

The ability to have a multi-dimensional legend where a given characteristic (e.g. size, shape, etc.) represents some different metric is desirable in some cases to isolate comparable metrics.

However, in the case mentioned by @formgeist, the multi-dimensional legend would not apply as the differing shape has no metric representation but is simply used to highlight one series from another.

In terms of readability of the chart, it is best to have a legend that makes it easy to connect the legend values to the chart with zero or minimal interaction.

There was also mention of occlusion of points, notice the squares occluding the green points. This is similar to #315 that would bring the selected or hovered series to the front.

---

For this issue I think an option specific to point styles for area, line and bubble charts should be exposed to indicate when to match the point styles.

[formgeist]

@nickofthyme We had the original APM issue bubble up in a "stale issue" triage, do you know if this is something that will be prioritized in a short-term roadmap for charts?

[markov00]

@formgeist this is not currently on our short-term roadmap.
It will be great if you can have a chat with @gvnmagni about this and how we can proceed and prioritize it.

[gvnmagni]

@formgeist this is not currently on our short-term roadmap. It will be great if you can have a chat with @gvnmagni about this and how we can proceed and prioritize it.

Would be great! I'd love to help