Long Titles Wrap but Cover the Chart

[sosiology]

To reproduce, see https://int.visualize.admin.ch/en/v/wVfk4PSYRdYk?dataSource=Prod on a smaller screen – the Y axis titles are wrapped, but the chart is not shifted to the bottom, so they are covering the chart.

[sosiology]

Reopening this @noahonyejese as while testing this issue https://github.com/visualize-admin/visualization-tool-private/issues/110 I noticed the labels cover the charts. I am not sure if this is a regression, or something missed during testing.

Example Charts

• https://int.visualize.admin.ch/v/NNpcUZt9jyt1?dataSource=Prod
• https://int.visualize.admin.ch/v/YO3b6ZRIm9ql?dataSource=Prod
• https://test.visualize.admin.ch/en/v/V0w8moL9yJwq?dataSource=Prod

Screenshots

Tested on a samsung galaxy s24, using Chrome.

[noahonyejese]

Hi @sosiology , I don't think it's on int yet I tested it on https://test.visualize.admin.ch and it seems to work fine there for screens as small as 375px in width (Iphone SE),

let me know what you think.

[noahonyejese]

@sosiology however I increased the margin a bit

hope this works

[florelina]

@noahonyejese Thank you.
I've tested the task and there seem to be still some issues:

• The labels overlap with the visualization and should be moved up

[noahonyejese]

@florelina thanks for the feedback it seems like there won't be really a solution that fits all sizes.

either the smaller screens have too little spacing or the larger screens have too much.

@bprusinowski do you think I should add a condition that makes more space for extra small screen?

Or extra long labels?

[bprusinowski]

@noahonyejese I think it should be possible to make it work correctly in all cases – it looks that currently in the code we try to compute the new height by multiplying fontSize by the number of overlaps and do it for two axes at the same time, which also could make it not work correctly if we have one really long title and other short one, if I am not mistaken 🤔

I think here we should also take into account things like e.g. line-height, and honestly I think it would be best to simply add a getTextHeight function that would add the text to DOM, constrain the container width, get the correct height and remove the temporary element using this method, eliminating any custom calculations.

What do you think?

[noahonyejese]

@noahonyejese I think it should be possible to make it work correctly in all cases – it looks that currently in the code we try to compute the new height by multiplying fontSize by the number of overlaps and do it for two axes at the same time, which also could make it not work correctly if we have one really long title and other short one, if I am not mistaken 🤔

I think here we should also take into account things like e.g. line-height, and honestly I think it would be best to simply add a getTextHeight function that would add the text to DOM, constrain the container width, get the correct height and remove the temporary element using this method, eliminating any custom calculations.

What do you think?

If we want to add additional calculations for the TextHeight then it might work, but I am not 100% sure if it would cover all cases to be honest. I will try approaching it by creating a getTextHeight , like this we can check if it's better.

[noahonyejese]

@bprusinowski I tried your approach it's slightly better, I think like this it's probably ideal. - thanks for the advice 👍