Chart text without overlapping

[Satglow]

Is your feature request related to a problem? Please describe.

Annual Energy Consumption chart – the translated text is overlapping each other. Shall the long expressions put in a hyphenated way (as a translation), following the column width somehow? Or a language-based automatic hyphenation can be applied for these strings?

https://ethereum.org/hu/what-is-ethereum

Describe the solution you'd like

Readable text below the chart.

Describe alternatives you've considered

None

Additional context

No response

Would you like to work on this issue?

• Yes
• No

[TylerAPfledderer]

@nloureiro @pettinarip should we have a storybook up to provide isolated visual testing of these charts?

Not seeing a clean solution without the chart being it's own block beneath the content at a higher breakpoint. 🤔

[nloureiro]

@nloureiro @pettinarip should we have a storybook up to provide isolated visual testing of these charts?

Not seeing a clean solution without the chart being it's own block beneath the content at a higher breakpoint. 🤔

this is a kinda unique chart, not a component that will be reused, I think, right?

if yes, it might not need to be in the storybook. dunno, what do you think?

[pettinarip]

Thanks to @Satglow for reporting this bug!

@nloureiro not sure what should be the best approach here, automatic hyphenation might be an easy workaround, but not the ideal as it makes it hard to read. Another idea: we could reduce the number of columns shown for certain locales.

======

@TylerAPfledderer SB related, yeah, not sure if a story for this component is worth it (this could be covered in the page stories if we have them at some point xD), but wouldn't hurt if you still want to do it. Anyway, do you know if Chromatic has snapshots per locale? I think it will always only take one snapshot per component unless we somehow specify that we want to use a different locale (???). Or are you thinking of some other way to test this?

[TylerAPfledderer]

Thanks to @Satglow for reporting this bug!

@nloureiro not sure what should be the best approach here, automatic hyphenation might be an easy workaround, but not the ideal as it makes it hard to read. Another idea: we could reduce the number of columns shown for certain locales.

======

@TylerAPfledderer SB related, yeah, not sure if a story for this component is worth it (this could be covered in the page stories if we have them at some point xD), but wouldn't hurt if you still want to do it. Anyway, do you know if Chromatic has snapshots per locale? I think it will always only take one snapshot per component unless we somehow specify that we want to use a different locale (???). Or are you thinking of some other way to test this?

I didn't have anything in particular. But for a snapshot per locale, can consider Chromatic modes: https://www.chromatic.com/docs/modes/

I can at the very least look at applying this globally.

[github-actions]

This issue is stale because it has been open 45 days with no activity.

[WebSculptor]

Hi I would love to work on this

[TylerAPfledderer]

Hey, @WebSculptor !

What do you have in mind for solving this?

[github-actions]

This issue is stale because it has been open 30 days with no activity.

[nloureiro]

@pettinarip @nhsz is this solved by the new graph framework?

[corwintines]

Adding this to dev sync to clear up

[github-actions]

This issue is stale because it has been open 30 days with no activity.

[minimalsm]

@corwintines did we get an answer here?

[wackerow]

Opening this back up... @nloureiro If you have any thoughts on design considerations here. @nhsz Have unassigned you so we can open this back up for the community.

[corwintines]

@nloureiro I posted a PR here to rotate the label by 45 degrees. If you approve this, we can bring it in