How to treat complex charts at small screen sizes

[envex]

With the introduction of Legends and Labels, we now have a problem where complex charts at small screen sizes are being pushed out of view.

We currently use fixed heights for the chart so we're not altering the layout of the page using one of our charts. Now that we render Legends and labels that can wrap, go diagonal, or vertical - we have to subtract the height of those elements from the charts "drawable" area.

In smaller containers, charts with long labels or lots of legends, we have to subtract too much height from the chart making them unreadable.

Example: A chart is 200px high. The Labels take up 80px and the Legends wrap to take up 80px. We subtract 180px from the 200px, making the drawable area of the chart only 20px.

Examples

Too many legends	Labels are too long

[carysmills]

I wonder if we should also take this issue into consideration #880

Perhaps we should have a min height that is a reasonable amount to allow a complex chart to be. Although, this might not solve every situation if we have giant legends and labels.

[envex]

Would it make sense to not render the Legends after a certain min-width? Are they even useful at that point?

We could also explore shrinking the size of the legends.

[aieaee]

Good catch. We're going to miss you Carys.

Here are some rough sketches for @envex's ideas ^^

1. Don't render the legends after a certain min-height
   

2. Shrunken legends
   

And another idea

3. Legend in a tooltip
   

Hmmm.

[envex]

The only issue I have with hiding/showing the legends is it's just a band-aid fix. If a user clicks to show the legend we're back at the same place we are right now with the tiny chart.

[aieaee]

Agree. The tiny legend idea is also a bandaid. That leaves us with the tooltip. I’ll explore what that might look like.

…

On Thu, Mar 10, 2022 at 10:22 AM Matt Vickers ***@***.***> wrote: The only issue I have with hiding/showing the legends is it's just a band-aid fix. If a use clicks to show the legend we're back at the same place we are right now with the tiny chart. — Reply to this email directly, view it on GitHub <#944 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AV36Q5N3YERSEOIDHNUQRPDU7IHSVANCNFSM5QJ7M6XA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[aieaee]

Two more ideas:

1. Hide the legend behind a small button
2. Hide the labels
   

[krystalcampioni]

Related to this discussion: #956

[aieaee]

I created an issue for this and posted a proposal here: #983