How can i customize the on hover tooltip in horizontal bar graph?

plotly.js
1

Hi,

I am creating a horizontal bar graph. Need help on customising hoverInfo.
I am looking for a solution to create a custom on hover tooltip (hoverInfo) for showing the multiple traces information on single tooltip (hoverInfo), also add different colors for different traces to identify it easily. Also i want to make it at 0 degree, by default it is tilted to 60 degree, i don’t how to make it into horizontal direction?

Thanks & Regards,
Neel

2

https://plot.ly/javascript/hover-events/ is a good place to start.

3

Thanks @etienne, already i had look. I was finding a solution to completely customise the hoverInfo box, customisations includes :-

  1. To have different coloured fonts inside same hoverInfo,
  2. To have single hoverInfo for multiple traces corresponding to single x/y co-ordinate,
  3. To change the angle of the hoverInfo in horizontal bar graph to zero degree.

If could help me to find a solution for any/all of the above customisations, it would be great help.

Thanks & Regards,
Neel

4

Dear @etienne,
I wonder for the horizontal bar plot, is there a way to show the hover tooltips below the bar, rather than to the right of the bar? This may be achieved by customizing the tooltip div, but that’s too much if there’s an option to show the tooltip on “left” “right” (default) “above” “below”…

For example: https://codepen.io/anon/pen/jebeVy?editors=0010

With hovermode: 'closest', I have:
image

I’d like to have the hover text to be below the hovered bar so that bars in the same row won’t be covered. Something like this:

image
image.png812×502 5.59 KB

Actually without hovermode: 'closest', the tooltips are below the bars, however tooltips for all bars in the row are shown, but I only want to show the one that is hovered.

I wonder is that possible? Thank you!