Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Plotly: How can I change the format of hover-on labels?

Tags:

plotly

I've looked through online documentation, but couldn't find how to change the format of hover-on labels:

screenshot

For example, if I'd like to display the number as "~611 thousand" or something of the sort.

like image 411
Mikhail Avatar asked Jun 05 '15 12:06

Mikhail


People also ask

What is hover name in Plotly?

Hover Labels is the most depectively-power feature for interactive visualization in plotly, for user it is the ability to reveal more information about the data points by moving the cursor (mouse) over the point and having a hover label appear.


2 Answers

Plotly tick and hover formatting are fully customizable using the python / d3 formatting language.

From an API, use axis attributes 'tickformat' and 'hoverformat' to set the behavior. For example, this graph has 'layout.yaxis.hoverformat': ',f'.

From the web app, input your formatting specs under "Axes" -> "Labels":

enter image description here

like image 184
etpinard Avatar answered Oct 06 '22 08:10

etpinard


Plotly allows for axis and hover format only String values, so you cant write your own function to format labels with such unusual style.

So I see only one solution -- change created hover tooltip using jquery and "on_hover" event:

result.on('plotly_hover', function (eventdata){
  /*
   * var hoverTooltip = $(".hovertext", result)[0],
   *     hoverText = $("text", hoverTooltip).get(0),
   *     hoverFrame = $("path", hoverTooltip).get(0);
   *
   *  do what you want here
   *
   */
})

But it's a lot of work here (you must take into account size and position of the hover tooltip also)

like image 23
ALIAKSANDR Avatar answered Oct 06 '22 06:10

ALIAKSANDR