1

I'm currently facing a challenge with a trend chart I designed. Right now in quantity of the values are less, so things are fine. but as the quantity seems to be increasing (e.g. 100,00. to 600,000) over time the space for the y-axis labels is limited and the layout is breaking. either the numbers go over the axis line and into the graph, or the axis line moves to the right resulting in less space for the chart. What are the alternatives of placements that could be considered for the y-axis labels.

enter image description here

Improve this question
2
  • 1
    Do you need to show the full label or are abbreviations an option? For numbers showing 100.000 as 100k.
    – jazZRo
    Commented Jul 14, 2022 at 10:31
  • IS this what you need? ux.stackexchange.com/questions/67250/…
    – Devin
    Commented Jul 18, 2022 at 19:46

3 Answers 3

Reset to default
1

Whatever the solution is, it will have some trade offs. A few options to explore:

I will start with the suggestion to think a little bit out of the box and reduce the horizontal space for the chart itself. For bar charts this can be done by showing less bars and let users select the bars they like to compare. For a line chart this is not possible or less useful. You will have to remove data points but that will make it less detailed. Another solution is to enable horizontal scrolling in the chart itself (so the y-axis with labels are always visible but the chart and x-axis labels scroll sideways).

Ideas for the labels:

  • Use abbreviations. For numbers use 100k instead of 100.000 etc.
  • Use alternative labels and show a legend near the chart. For the labels you can use abbreviations (since they may not be known by everyone), or icons/symbols or whatever is suitable for the situation. The legend should be easy to refer to.
  • Use truncation. Not a very good suggestion1 but still a suggestion. Be aware that truncation can lead to weird text cut-offs and you need to reveal the whole label some way2
  • Position the labels inwards with some transparency. When the label obscures the chart too much you can add hover and touch2 to reveal the chart under it (for example by making the label more transparent):

enter image description here

1Truncation is not a content strategy.
2To reveal more information, you can make use of a tooltip that is shown when hovering, but for touch screens you need something like a clickable/touchable info ℹ️ icon to make it discoverable.

N.B. For the x-axis it is quite common to tilt long labels (often with an angel of 45°). For the y-axis this is not at all that effective.

Improve this answer
0

The best way to manage scales is to use sliders for both the axisenter image description here

Doing this the user can zoom on any axis and will not be concerned on how big or small the scale is, how close the lines are etc.

Zoomed view of the above image enter image description here

Improve this answer
1
  • 1
    maybe my question was not clear, but i don't see how using sliders solves the problem I'm facing. imagine one your Y-axis starts having larger numbers, e.g. 60,000 this is going to take up horizontal space. this means the layout will break by the label numbers moving over the axis line, shifting outside or pushing the axis line inside.
    – Blue Ocean
    Commented Jul 15, 2022 at 6:30
0

This is another option. Having sliders helps in expanding the x axis labels as well, for example jan can become january etc

enter image description here

enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.