I'm designing the hover states for 2 charts, a bar chart and a line chart. Maybe I'm over thinking, but for both these charts I find there is an arrow alignment that would work better based on the type of the chart. Should they be point horizontally or vertically aligned?

For bar chart I think pointing horizontally would make sense at it doesn't cover the details on the bar. For the line chart I'm not sure which would be the better. What consideration should I make in order to decide these?

enter image description here

2 Answers 2


I think you should go with the top solution for both the bar and the line chart.
They are placed well enough to not hide any significant data for being shown.

I really don't like the bottom bar chart solution at all, especially since it covers the end of the bar, that is not a good solution at all.
For the bottom line chart I still think it covers to much of the data from being shown.

enter image description here


What if there's a data point at the bottom right? Where will the tooltip show then?

It is advisable to have different tooltip directions based on where your mouse is; so that the tooltip is visible at all times.

Top right area of your screen: Tooltip pointing top or top-right.
Top left area of your screen: Tooltip pointing top or top-left.
Bottom right area of your screen: Tooltip pointing bottom or bottom-right.
Bottom left area of your screen: Tooltip pointing bottom or bottom-left.

If chart readability is a very important aspect, allow users to turn off the tooltips as well in chart settings.

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.