CODEWITHSUNDEEP
plotly
Mikhail
Mikhail

Reputation: 1346

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

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.

Upvotes: 8

Views: 13620

Answers (2)

ALIAKSANDR
ALIAKSANDR

Reputation: 11

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)

Upvotes: 1

etpinard
etpinard

Reputation: 5011

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

Upvotes: 7

Related Questions