✨ (stacked bar) move legend to the top on mobile

[sophiamersmann]

Moves the legend of stacked bar charts to the top on mobile.

(SVG differences come from the previous PR)

If there is very little space (due to long text), then moving the legend to the top eats into the vertical space badly:

Before (375px)	After (375px)

Before (325px)	After (325px)

(Note that the legend overflows in the before version)

[sophiamersmann]

• ✨ (stacked bar) move legend to the top on mobile #3629 👈
• ✨ (stacked bar) hide single-item legends #3622
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @sophiamersmann and the rest of your teammates on Graphite

[owidbot]

Quick links (staging server):

Site	Admin	Wizard

Login: ssh owid@staging-site-discrete-bar-mobile-legend

• Site-screenshots: https://github.com/owid/site-screenshots/compare/discrete-bar-mobile-legend
• SVG tester: https://github.com/owid/owid-grapher-svgs/compare/discrete-bar-mobile-legend

SVG tester:

Number of differences (default views): 19 (a90d8f) ❌
Number of differences (all views): 100 (c7314e) ❌

Edited: 2024-06-10 11:25:39 UTC
Execution time: 1.19 seconds

[marcelgerber]

Nice! The only thing I could find is that with faceting (for example 2x2), this can make things worse at some screen widths.

If you want to look into that some more, feel free, but otherwise this is also fine.

I realize now that the faceting legend logic is different, as it is always placing the legend at the top.

[sophiamersmann]

Merge activity

• Jun 10, 7:44 AM EDT: @sophiamersmann started a stack merge that includes this pull request via Graphite.
• Jun 10, 7:47 AM EDT: Graphite rebased this pull request as part of a merge.
• Jun 10, 7:49 AM EDT: Graphite rebased this pull request as part of a merge.
• Jun 10, 7:51 AM EDT: @sophiamersmann merged this pull request with Graphite.