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. [Legend] Improved readability on long legend values #1245
2. Can be structured in a hierarchical way: used for multilayer piechart or split charts or in a flat way (Group series on legend #295, Nested terms aggregations in legend #223)
3. Each item can contain:
   1. different icons/colors/patterns (depending on the element, line, bar, area, annotation, Add annotations to the legend #555 point Scatterplot #502, Group series on legend #295 )
   2. Text, arbitrary long, possibly wrapped, truncated, resizable (configurable) Better support for long values  kibana#41418
   3. User can select and copy the text Make legend in charts selectable #710
   4. An arbitrary number of extra values like te max, current, avg value of the specific series, annotation (Make the legend extra parameter customizable  #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) feat(legend): allow color picker component #545
   2. Hide and show the series/annotations on click (Ability to toggle annotation on/off #299)
   3. Highlight a series on hover (feat(legend/series): add hover interaction on legend items #31)
   4. Filter in/out a series feat(legend/click): add click interations on legend titles #51
   5. Filter in/out annotations Ability to toggle annotation on/off #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 Legend design v2 #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. Customizable legend width #963
11. The legend can be optimized for printing/png exporting, especially long/scrolling legends (Add legend to PNG snapshot #458)
12. The legend can completely replace the tooltip when showing the values for the data points on hover
13. Legend item text color #881
14. Legends appropriately size grid styles based on the number of legend items. See [legend] top and bottom legend position doesn't work well with new truncate setting #1312
15. Floating legend should adapt to the chart width/height [Lens] New legend inside chart can be more smart in terms of layout kibana#106372
16. Improve legend item ordering (Lens "Top Values" legend appears in ascending order kibana#111873)
17. Add texture style in legend color icon #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. [Legends] Discuss: hard to discover shift-click to isolate series #1339

Other related issues:
#79