Page MenuHomePhabricator

Adjust styling of legend
Open, LowPublic1 Estimated Story Points

Description

From T375235 we should make adjustments to the styling of the legend on charts.

TODO

  • Legend should be oriented vertical
  • The item gap should be 8
  • Legend should begin 16px beneath the Title
  • Legend text should be aligned left
  • Legend text color should be #202122 in light mode, #EAECF0 in dark mode (--color-base variable)
  • Font weights and sizes can remain the defaults

Event Timeline

Jdlrobson triaged this task as Medium priority.Nov 6 2024, 7:26 PM
Jdlrobson set the point value for this task to 1.Nov 18 2024, 7:54 PM
CCiufo-WMF lowered the priority of this task from Medium to Low.Nov 18 2024, 8:02 PM
Catrope edited projects, added Charts (Sprint 13); removed Charts.

Do we want the legend to be vertical for all chart types? This makes sense for pie charts but think it would constrain the space available for line and bar charts quite a bit, especially on the smaller mobile charts.

Good question. I think as long as we can make wrapping for horizontal layouts work well and respond to pushing a chart down as a legend wraps to more lines, I think we can prioritize using horizontal legends for all charts other than pie.

CCiufo-WMF edited projects, added Charts; removed Charts (Sprint 13).

IIUC, the legend still needs some fixes for dark mode, at least in Line Charts, when the quantity of entries requires showing the arrows-to-scroll feature.
E.g. in https://www.mediawiki.org/wiki/Extension:Chart#Line

image.png (254×612 px, 19 KB)

versus
image.png (189×470 px, 10 KB)