My question is similar to this one.

I have a line graph made using c3js. When the user alters some parameters through sliders, the line will be replotted.

I have also created a custom legend (per client request) in which the label will stick to the end of the line.

It'd be fine if the lines are spaced apart, but quite often they are close together and I get an overlap. What's the best thing to do here?

Overlapping labels

I'd like to do something like this, but there isn't anything as structured as rows in my example. I also cannot do this, because the client explicitly stated they want the legend to follow the end-of-line.

  • 1
    Why can’t you just shift crashing labels up and down a bit?
    – Crissov
    Nov 14, 2014 at 18:56

2 Answers 2


A few different ideas come to mind.

1 - make the label color match the associated line color, so even if they overlap it's clear which label belongs to which line.

2 - Put each label in a containing div, possibly giving that containing div a border the same color as its associated line, with an opaque white background ... and possibly when a user clicks on a label [edit: a label OR a line] have it jump to the front position (z-index).

enter image description here

Edit 2: I know this isn't exactly what you asked for, as the labels don't follow the lines, but this is how Statcounter handles a similar situation:

enter image description here

  • I like this idea because it takes little effort to implement, is simple and intuitive, and give a clear indication of the areas which are 'hoverable'
    – dayuloli
    Nov 15, 2014 at 3:18

One option would be to give the user the ability to hide one or more of the lines, and the ability to display hidden lines again.


Based on what dayluloli stated:

  1. The lines are often close together and overlap.

  2. The legend should follow the end-of-line.

Thus, the lines and legend should be presented in the graph.

With the four lines in the example, hiding one of the overlapping lines may not necessarily be better than changing the z-index.

If there are several lines and several overlapping lines, it is possible that too much information is presented in one graph.

Changing one or more z-indexes may not matter.

Even if the client agrees to the separation of the lines from the legends, it may still be difficult for the user to see the lines.

In this case, the user should probably make a choice: which ones to view simultaneously? Since this choice may vary on several factors that perhaps only the user can decide at the time when the choice will be made, giving the user the opportunity to make the selections would probably be an option worth considering.

  • Welcome to the site @JohnFrederick. Can you expand your answer. What makes this solution more suitable that alternatives? Nov 15, 2014 at 6:15
  • 1
    @3nafish: thanks for the greetings! I am editing my answer to include some explanation for my answer earlier. Nov 15, 2014 at 9:02

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.