I have an issue where data point lines are overlapping labels. You can see this below:

enter image description here

With multiple lines passing over labels it currently gets quite messy.

In terms of user behaviour, would the best thing be, to move the label infront automatically if a line goes over it?

  • 1
    Yes. But also make sure that the user knows which line the text represents.
    – Nash
    Commented Mar 25, 2021 at 10:39
  • Thank you, I just wanted some other opinions of what we could do.
    – AmanSahota
    Commented Mar 25, 2021 at 16:05

2 Answers 2


Is it actually possible to avoid this problem? I don't think so because there are so many different scenarios involved in adding, removing and modifying the data points and labels that you will always run into some issues because of the free flowing nature of flowcharts (or at least the example you have shared).

I think it depends on the logic that you used to implement how the lines are displayed, because the confusion comes from a change in the order when you add or remove lines. Usually this is not a problem if there are different colours to help differentiate between the different lines (it's not a solution, but at least it makes things slightly less confusing).

In the diagramming tools I have used, overlapping labels with lines is usually solved by allowing the users to move the label to where they want it to be positioned, but this is also not an ideal solution because they might need to do this frequently as more lines are added.

I think the best solution is to come up with the correct logic for showing the order of the lines, and then implement a visual design that correctly displays lines that overlap (see how they do this in Microsoft Visio in attached image). This way, when you select a particular node or connection line, you can display the lines and labels that corresponds to that selection.

enter image description here


I'd add two little improvements to @Nash's idea:

  • Easy: Move all labels above (z-direction) the lines, so that the text always remains readable.

  • Harder: When two lines cross at a midpoint of one of the lines (i.e., where one of the labels would be placed; your example), move the label a little to the side along its line, so that the user can identify which line it belongs to.

  • Hardest: When two lines intersect near their midpoints (i.e., labels would overlap), move both labels along their lines, enough to avoid overlap.

And as noticed, this will not guarantee non-overlap for all situations.

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.