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

13.1k views Asked by At

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.

2

There are 2 answers

3
etpinard On BEST ANSWER

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

0
ALIAKSANDR On

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)