Legends

[markov00]

Legend

The current legend design doesn't scale well. I'm collecting a set of features, constraint, and issues that need to address when redesigning the legend

Scope

1. Used to identify various chart elements: series, data points, other markings (annotations lines/rectangles)

Best practices

1. Labels positioned as close as possible to the elements they refer to. Direct labeling instead of separate legend
2. If using a legend on a bar chart, the order should be in the same sequence as the bars for easy reference

Features

1. https://github.com/elastic/elastic-charts/issues/1245
2. Can be structured in a hierarchical way: used for multilayer piechart or split charts or in a flat way (https://github.com/elastic/elastic-charts/issues/295, https://github.com/elastic/elastic-charts/issues/223)
3. Each item can contain:
   1. different icons/colors/patterns (depending on the element, line, bar, area, annotation, https://github.com/elastic/elastic-charts/issues/555 point https://github.com/elastic/elastic-charts/issues/502, https://github.com/elastic/elastic-charts/issues/295 )
   2. Text, arbitrary long, possibly wrapped, truncated, resizable (configurable) https://github.com/elastic/kibana/issues/41418
   3. User can select and copy the text https://github.com/elastic/elastic-charts/issues/710
   4. An arbitrary number of extra values like te max, current, avg value of the specific series, annotation (https://github.com/elastic/elastic-charts/issues/561)
4. Rendered in two formats: vertically (left/right) or horizontally (top/bottom)
   1. if horizontally places (top/bottom) than the text can be displayed with a center alignment in respect to the current chart
5. The amount of space used should be as minimal as possible but should be expanded when required a better readability of every item.
6. We should avoid when possible scrolling, the legend needs to convey a subset of information that the chart can't express directly, due to the limited space on the chart or due to the complexity of the geometries
7. They can be configured to be overlayed on the chart to maximize the amount of space for the chart
8. Each legend item can have multiple actions:
   1. Open a popup to change color (done with an external component) https://github.com/elastic/elastic-charts/pull/545
   2. Hide and show the series/annotations on click (https://github.com/elastic/elastic-charts/issues/299)
   3. Highlight a series on hover (https://github.com/elastic/elastic-charts/pull/31)
   4. Filter in/out a series https://github.com/elastic/elastic-charts/pull/51
   5. Filter in/out annotations https://github.com/elastic/elastic-charts/issues/299
   6. All these actions need to be accessible from the keyboard
9. It can be rendered as a table if we a numerous set of extra values are used https://github.com/elastic/elastic-charts/issues/2096
10. It can take up as much as space as needed, or be limited to a specific width in pixel or percentage of the chart or it can be resized with a handle. https://github.com/elastic/elastic-charts/issues/963
11. The legend can be optimized for printing/png exporting, especially long/scrolling legends (https://github.com/elastic/elastic-charts/issues/458)
12. The legend can completely replace the tooltip when showing the values for the data points on hover
13. https://github.com/elastic/elastic-charts/issues/881
14. Legends appropriately size grid styles based on the number of legend items. See https://github.com/elastic/elastic-charts/issues/1312
15. Floating legend should adapt to the chart width/height https://github.com/elastic/kibana/issues/106372
16. Improve legend item ordering (https://github.com/elastic/kibana/issues/111873)
17. https://github.com/elastic/elastic-charts/issues/1520
18. Legend automatic size should can be constraint to a set of values
19. Improved hierarchical representation on horizontal legends

Constraints

1. In case of a dynamic computation of space required for the Legend, it’s necessary to render or compute the width/height of the legend before rendering the chart itself. If possible, computing the required width/height is preferable, to avoid rendering the legend and the chart into two different moments in time
2. The same format, except the aspect, can be applied to a tooltip if necessary, both components bring in exactly the same type of information, so we should be able to reuse that component on the legend

Discussions

1. https://github.com/elastic/elastic-charts/issues/1339

Other related issues: https://github.com/elastic/elastic-charts/issues/79

[VijayDoshi]

One very useful action that could be taken in a legend is renaming/aliasing the field. We don't support aliases today; however, it would be great to have a field alias or "rename" capability right from the legend eventually.

[markov00]

hey @VijayDoshi definitely this is something that we can support, as for the color picker we can also specify something to change the series name. Unfortunately, the usage of this feature depends on the Editor that is currently rendering/configuring the chart, that most of the time configure these properties in different ways:

• in Timelion you can change name/color via its expression
• in TSVB using editor's forms
• in vislib series names are changed via the Custom Title and the color via the color picker on the legend
• in Lens name and color can be changed through the Y metric subpanel

Probably, these different ways of changing names/colors were using the assumption that the legend can be defined as 'hidden' on the editor itself, hiding the legend and making it impossible to change these properties from there. I personally think that the legend, when editing a chart, is a meaningful part of the visualization that should always be rendered (independently if it will be hidden or not on a dashboard) so that the user can interact directly at the source and not through an intricate set of menus and submenus.

[VijayDoshi]

One other request for legends is some control over legend sorting. Options might be Alphabetical, Manual (like I might want "United States" as the first value in the legend - because, of course everything is US centric, right), by some Metric other than the one on the value of the associated numeric axis.

Agree that direct interaction is very useful. In the manual sort above someone who is not US centric should be able to sort what they care about to the top via a drag and drop - ideally it is persisted for that user, but that may need to wait.