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

**URL:** <https://community.plotly.com/t/how-to-see-a-y-value-and-y-value-as-a-percent-of-some-number-in-the-same-plot/82372>\
**Category:** 📊 Plotly Python\
**Tags:** question\
**Created:** [February 15, 2024, 12:07am UTC](https://community.plotly.com/t/how-to-see-a-y-value-and-y-value-as-a-percent-of-some-number-in-the-same-plot/82372 "2024-02-15T00:07:28Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![GallopingNarwhal](https://avatars.discourse-cdn.com/v4/letter/g/bbce88/32.png) [@GallopingNarwhal](https://community.plotly.com/u/GallopingNarwhal)\
**Post date:** [February 15, 2024, 12:07am UTC](https://community.plotly.com/t/how-to-see-a-y-value-and-y-value-as-a-percent-of-some-number-in-the-same-plot/82372/1 "2024-02-15T00:07:28Z")

</div>

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:

```auto
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](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/0/8/081225cbe5094f6f7124fadd22bed9b9012fd4de.png)

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:

```auto
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](https://plotly.com/python/hover-text-and-formatting/#customizing-hover-text-with-a-hovertemplate) & [d3 formatting](https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#d3_format)

---

<div class="post-metadata">

**Author:** ![r-beginners](https://avatars.discourse-cdn.com/v4/letter/r/a87d85/32.png) [@r-beginners](https://community.plotly.com/u/r-beginners)\
**Post date:** [February 15, 2024, 2:27am UTC](https://community.plotly.com/t/how-to-see-a-y-value-and-y-value-as-a-percent-of-some-number-in-the-same-plot/82372/2 "2024-02-15T02:27:44Z")

</div>

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.

```auto
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()

```

 ![2024-02-15 112519](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/d/5/d569b198164a685929ca4bf9996826b29ae16b63.png)

---

<div class="post-metadata">

**Author:** ![GallopingNarwhal](https://avatars.discourse-cdn.com/v4/letter/g/bbce88/32.png) [@GallopingNarwhal](https://community.plotly.com/u/GallopingNarwhal)\
**Post date:** [February 15, 2024, 3:30pm UTC](https://community.plotly.com/t/how-to-see-a-y-value-and-y-value-as-a-percent-of-some-number-in-the-same-plot/82372/3 "2024-02-15T15:30:45Z")

</div>

> [@r-beginners](#):
>
> ```auto
> 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](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/b/8/b8297131e6f0845a953474d2d3c9435a9c00700c.png)

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

---

<div class="post-metadata">

**Author:** ![r-beginners](https://avatars.discourse-cdn.com/v4/letter/r/a87d85/32.png) [@r-beginners](https://community.plotly.com/u/r-beginners)\
**Post date:** [February 16, 2024, 1:49am UTC](https://community.plotly.com/t/how-to-see-a-y-value-and-y-value-as-a-percent-of-some-number-in-the-same-plot/82372/4 "2024-02-16T01:49:58Z")

</div>

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.