How to see a y value and y value as a percent of some number in the same plot

Hello,

I am trying to display the y value in two formats for a scatterplot. This plot is expected to have 10,000+points (in multiple traces), and I don’t want to store 20,000 datapoints just to get the y value in two formats.

The first format is just the y value itself. The second format is the y value divided by some number (and in percent form). that number will be the same for every point in the figure.

For example, one y value may be 505, and the secondary format I want to display is: y / 500 - in percent form. So hovering over that point I would see something like: “505 (101%)”.
custom display:

custom_y = lambda y: str( round((y/500) * 100) ) + "%"

Due to the number of points I expect in each figure, I don’t want to store the y data twice). Looking at custom hovertemplates, I can’t seem to make it work. From what I can tell, I can format the y value as a percent, but not a custom percentage. EX: the hovertemplate could be: “%{y} (%{y:,.0%})”
Which will get me:
image

Hover, I can’t seem to find a way to apply a custom formatter to that. The only option I have found is using the “text” field, but that would generate a lot of data in the figure that I’m trying to avoid.

Is there a way to customize the hoverlabel like this? Or a custom button option that would allow me to toggle between these a display of value vs custom percentage (without duplicating the data on the backend)?

Simplified code show y and y as a percent. but I want y / 500 converted to a percentage:

import pandas as pd
import plotly.express as px

df = pd.DataFrame({'a':[489,495,500,505,507]})

fig = px.line(df)

fig.update_traces(xhoverformat='%H:%M', yhoverformat=',.2f', hovertemplate='%{y} [%{y:,.0%}] (%{x})')

fig.show()

hovertemplate plotly reference & d3 formatting

There may be another technique, but in the graph object, meta can be used for hover, so it can be accomplished by specifying it in a list with percentages calculated there.

import pandas as pd
import plotly.graph_objects as go

df = pd.DataFrame({'a':[489,495,500,505,507]})
val = 500
fig = go.Figure()
fig.add_trace(go.Scatter(mode='lines', x=df.index, y=df.a, meta=[(y/val)*100 for y in df.a]))

fig.update_traces(xhoverformat='%H:%M', yhoverformat=',.2f', hovertemplate='%{y} [%{meta}%] (%{x})<extra></extra>')

fig.show()

Thank you for showing me this, I have never used meta before. Looking at how it’s being stored in the Figure, it is unfortunately still storing a meta value for every y value in the plot:

image

Whereas I’m hoping to store 1 operation (similar to the string formatting of hovertemplate), that is applied on the hover.

With plolty, you can do what you want within the graph code, but you will still have data within the graph. As far as I know there is no way to do that.