I have a program that displays a dense collection of line series. I can select series from a tree view to the left of the chart.

My issue is I need an elegant way to show the user which line series is selected. Thicker lines dont work as they tend to get in the way of other lines. Dashed lines dont work as the the lines are so volatile you either miss out on important features of the graph, or cant tell its dashed at all.

Any other solutions?

  • Could you provide a mockup of your current state? Aug 8 '18 at 9:01

You could lower the transparency or saturation of all the other lines, to highlight the selected series or add a drop-shadow / glow to it.

  • 1
    +1 for changing the transparency or saturation (although it should be increasing the transparency / lowering the opacity).
    – gerstemout
    Aug 8 '18 at 20:40
  • Really like this solution, it addresses both my issues. Thanks!
    – Loocid
    Aug 9 '18 at 2:05
  • @gerstemout You're right, thanks, mixed up opacity and transparency ;)
    – Rick P
    Aug 9 '18 at 8:45

In addition to @Rick, if you have a lot of lines on the graph, it might be difficult to assess the value for a given x.

Highcharts solves this issue by making a tooltip visible whenever the mouse is moving on the line of the chart. It makes it very clear which line is concerned and the given value.

Illustration of a tooltip displayed

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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