A new legend design is proposed here.
Instead of the existing legend behavior, we will have two legend formats: table and inline. Each version has its own pros and cons and its use depends case by case.
Each legend format can be used with each 4 possible positions around the chart (top, left, bottom, right), each format will behave slightly differently on each position.
Both format can support series statistics (or multiple values) depending on the chart type as highlighted here
Table format
Series names are aligned to the left, and values are aligned to the right (such as their header) in order to simplify comparison between rows.
Table header:
- can be hidden by default when only the series/categories name are displayed and no statistic/value is visible
- the series header label should be passed from the API
- the other statistics header labels are in English by default, but we should provide a way to internationalize them (also on a subsequent PR)
Table content:
- using what was implemented here is possible to ask for one or many statistics to be shown in the table/inline version.
- the same statistics order should apply
Inline format
Values follow the data series name, for each data series columns header are repeated. We use a : char to separate them
Legend sizing, truncation, line wrapping
The legend can be sized automatically or statically with a fixed width/height.
Currently, when auto-sized legend and is rendered at the left/right side of the chart, the legend computes its maximum size automatically before rendering (via canvas measureText and not via DOM requests to avoid multiple rendering passes before rendering the chart). The current size is computed based on the label length and the legend value that is currently displayed without interactions.
With these new formats, we should improve this calculation and find a good way to measure the max legend size based on something similar clamp(max(table headers, formatted cell values), 1/2 of the chart parent size).
| format |
position |
size |
scroll |
wrap/truncate |
| table |
left/right |
clamp(max(header/values), 1/2parent)) |
horizontal + vertical |
values and their header are fixed to their max size, label/series name title instead will take at maximum the 3/4 of the available space, then it goes to 2 lines max and then truncates |
| table |
top/bottom |
full chart size \ 3 rows |
vertical + horizontal |
values and their header are fixed to their max size, label/series name title instead will take at maximum the 3/4 of the available space, then it goes to 2 lines max and then truncates |
| inline |
left/right |
clamp(series + values, 1/2parent) |
scrollable vertically |
wrap to multi lines, no truncation |
| inline |
top/bottom |
full chart size |
vertical scroll, items float left |
wrap to multiline, no truncation |
A new legend design is proposed here.
Instead of the existing legend behavior, we will have two legend formats:
tableandinline. Each version has its own pros and cons and its use depends case by case.Each legend format can be used with each 4 possible positions around the chart (top, left, bottom, right), each format will behave slightly differently on each position.
Both format can support series statistics (or multiple values) depending on the chart type as highlighted here
Table format
Series names are aligned to the left, and values are aligned to the right (such as their header) in order to simplify comparison between rows.
Table header:
Table content:
Inline format
Values follow the data series name, for each data series columns header are repeated. We use a
:char to separate themLegend sizing, truncation, line wrapping
The legend can be sized automatically or statically with a fixed width/height.
Currently, when auto-sized legend and is rendered at the left/right side of the chart, the legend computes its maximum size automatically before rendering (via canvas measureText and not via DOM requests to avoid multiple rendering passes before rendering the chart). The current size is computed based on the label length and the legend value that is currently displayed without interactions.
With these new formats, we should improve this calculation and find a good way to measure the max legend size based on something similar
clamp(max(table headers, formatted cell values), 1/2 of the chart parent size).