I'm currently reworking some existing graphs which are shown on a webpage for a B2B tool. These graphs are showing the current state of what's happening in the life cycle of an animal, along with the norm and a predicted value. In this particular graph below we are showing animal weight.

Weight (large)

As you can see 3 different values are shown:

  • actual weight (full blue line)
  • predicted future weight (white dots with blue border, on the far right)
  • norm (blue dots)

When the user hovers with the mouse over the graph, the legend shows the specific values, as is shown in the example for 32 weeks.

I would like to focus on the legend. It bothers me that "norm" is shown underneath the actual value, while the predicted future value is shown on the right side of it.

On other places in the website, we show the same graph, but in a smaller view.

Weight (small)

Parameter names are translated, and could potentially be very long.

Longer names

Some graphs are showing data for multiple parameters combined (and could potentially have a value, a norm and a future prediction for each parameter)

Combined parameters

Now, as I mentioned, it's the legend that bothers me. The "norm" is shown underneath the actual value, while the predicted value is shown on the right side of it.

Here are some facts:

  • The predicted future value never overlaps with the actual value
  • The norm could overlap with both the predicted value and the actual value
  • Parameter names could be potentially very long
  • Need to be able to show the full legend even in the smaller view

I am wondering what my options are to improve this. My initial thoughts are to "merge" the columns for predicted value and actual value into 1 column, as shown below. This simplifies the legend. Since predicted values never overlap with actual values, this seems technically feasible: Just change the icon and the label of that first column. But is it a good idea ? Are there any better options I'm not considering ? Or is my solution perhaps worse than what I had before?

Proposal (1) Proposal (2)

Thanks for your comments and insights.

  • Is this an aesthetic problem? Then this is the wrong site. If this is an UX problem, then what exactly is the problem?
    – jazZRo
    Jul 9, 2020 at 7:38

1 Answer 1


The problem is that 'predicted' term has no clear definition. Usualy, 'predicted' is extension of 'actual' for time in the future. So it seems to be just united with actual graph but using another dot type. Thus you have 2 graphs instead of 3. Then usualy (this is guess) your user wants to see only actual graph, so you can replace individual checkmarks for norm with one common checkmark 'Show norms'. The same solution you may use for predicted. You will have N + 2 checkmarks where N is number of actual graphs.

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.