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.
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):
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.