How to customize Plotly Tooltip

plotly.js
1

Hi

I want to customize the hover tool tip which is displaying during data point hover. Below is the sample

Can you please help on this.

Thanks
Nithya

3 Likes
2

In order to have a fully-custom tooltip like the one above, you’ll need to add a handler for the plotly_hover event where you would add a custom <div> to DOM and position it using the event data.

Some useful info: https://plot.ly/javascript/hover-events/

1 Like
3

but is there position info in the event data?

4

As in x / y data position or pixel position?

If the former, see Documentation on Plotly hover and click events - #2 by etienne for more info

If the latter, then see: https://codepen.io/etpinard/pen/wGEjMB

3 Likes
5

Hi @etienne,

I’m trying to customize the tool tip for a box and whisker chart .

Looks like if the x-axis value is not an integer, in my case the x-axis ticks are time ranges (10:45 - 11:00) then i get an undefined as pixel value.

Do you have any recommendation that i can use to customize the tool tip for a box and whisker? I would like create a custom tooltip that will show min,max,quartile,median and some additional values in the tooltip.

Thanks in advance.

6

Can you share a code snippet of what you attempted so far? This will help understand what exactly you’re trying to do. Thanks.

7

Here is the link to the sample : https://jsfiddle.net/sjselvan/3q42oxhh/?utm_source=website&utm_medium=embed&utm_campaign=3q42oxhh

It looks like the x pixel position is always undefined and it has nothing to do with the x-axis ticks.

All I’m trying to do is to replace the default tool tip with a custom tooltip for the box & whisker which will show [Max: 5 , Upper Quartile: 3, Median : 3, Lower Quartile : 3, Min : 2, Time : 10:45 - 11:00, Random_Property:Value].

  1. I need to get the X, Y pixel position to set the custom tooltip div position
  2. would like to know the way to pass custom values to the chart that i can later use it to display them in the tooltip.
  3. Is there a way to add a text to the box and whisker something similar to the ‘text’ property for a line chart. I can skip (1) and (2) If (3) is possible
8

Here’s how to get the boxes corresponding calc data on hover (which is essentially the set of datum we use to draw things internally) → Edit fiddle - JSFiddle - Code Playground

You might want to look at Boxplot hoverinfo text not display

9

Thanks @etienne. I’m able to add a text using annotations. I’ll post the complete solution soon.

10

@etienne Is there a way to

  1. display the annotations only on mouse over?
  2. also position the annotation just above the max value? I face issues when i set the Y-axis type as ‘log’.

https://jsfiddle.net/sjselvan/3q42oxhh/3/

11

See Edit fiddle - JSFiddle - Code Playground

You might want to try xanchor and yanchor to fine-tuned the positioning of your annotations.

12

Hi @etienne,

I’ve a similar use case like @nithyaranim, but this time within a heatmap.

I’m using the l2p (what’s this acronym standing for?) in combination with the pointNumber data to get a relative positioning within the heatmap. It looks like:

x: point.xaxis.l2p(point.pointNumber[1]),
y: point.yaxis.l2p(point.pointNumber[0])

But the problem with that is that it is relative to the top/left origin of the heatmap svg itself without the outer x- and y-axis labels, so I’m actually missing that part and wonder about whether there isn’t a built-in functionality to get this positioning information directly? The problem is that using external divs as tooltip area that they are located completely outside of the chart and with that I need the information with reference to the top/left origin outside of the chart and the axis labeling.

What seems to work is to use the axis private _offset property and add it to the x and y positions above, so I get

x: point.xaxis.l2p(point.pointNumber[1]) + point.xaxis._offset,
y: point.yaxis.l2p(point.pointNumber[0]) + point.yaxis._offset

But that looks quite nasty to me. Can you point me to some documentation or demo on how to do that “the plotly way” esp. for the heatmap?

Thx in advance,

Andreas

1 Like
13

That stands for linear-to-pixel.

Unfortunately, that’s properly the best we have available at the moment.

We’re hoping to clean up our event data in v2. See wishlist for potential breaking changes since v1 · Issue #420 · plotly/plotly.js · GitHub for more info.

1 Like
14

Hi etienne,

ok. Thx nevertheless. I will then look forward for the v2 release.

15

Hi @andi1984, thanks for your solution to this, It’s very helpful to me.

@etienne I’m working off of this example, but what if I resize the chart?

How can I get the

point.yaxis.l2p(point.pointNumber[0])

of a point that hasn’t triggered the ‘plotly_hover’ callback? Is there I way I can search for the updated point’s data (maybe by where it is in the index of the array) after I call Plotly.relayout ?

1 Like
16

thisLayer.on(“plotly_hover” (pointData) => {
const info = pointData.points.map((d) => {
const yaxis = pointData.points[0].yaxis;
const xaxis = pointData.points[0].xaxis;
const distY = yaxis.l2p(d.y) + yaxis._offset; //
const distX = xaxis.l2p(d.x) + xaxis._offset;
this.tooltipStyle = “left:” + distX + "px; " + “top:” + distY + “px;”;
}
});
This will work to calculate the exact point where the tooltip must be shown, but the thing is that you should avoid pointer events on the tooltip or it will blink when hovered . Just add “pointer-events: none;” to your tooltip css.

2 Likes
17

Hi @etienne,

I’m also trying to implement a custom tooltip, but am having difficulty getting the pixel coordinate for non-numeric axes.
Eg: https://codepen.io/Person21/pen/evBeMr

The x-coordinate is undefined. This is because l2p returns BADNUM if the input is not a number.

Is there any way to get the pixel value for a non-numeric axis?

2 Likes
18

d2p seems could work for non-numeric axes. But I am not 100% sure.

19

Thanks, it works!
Just a note to anybody else who wants to use this: d2p is only available for plotly 1.21 and above.

1 Like
20

Dear @etienne,
This thread is very helpful, I tried to replace the default tooltip with my customized one, it seems to work:

Let me know whether this is the correct way to customize the tooltip. Thanks.

Also my own tooltip doesn’t seem to be as “stable” as the original one, it’s very sensitive to mouse move, is there any way to fix this? Thank you!

1 Like