# How to format float values in a line plot hover

**URL:** <https://discourse.holoviz.org/t/how-to-format-float-values-in-a-line-plot-hover/1557>\
**Category:** hvPlot\
**Created:** [December 14, 2020, 2:11pm UTC](https://discourse.holoviz.org/t/how-to-format-float-values-in-a-line-plot-hover/1557 "2020-12-14T14:11:42Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![agstreet](https://discourse.holoviz.org/letter_avatar_proxy/v4/letter/a/7cd45c/32.png) [@agstreet](https://discourse.holoviz.org/u/agstreet)\
**Post date:** [December 14, 2020, 2:11pm UTC](https://discourse.holoviz.org/t/how-to-format-float-values-in-a-line-plot-hover/1557/1 "2020-12-14T14:11:42Z")

</div>

How to format float and other values in a line plot hover?  
For example, in [https://hvplot.holoviz.org/reference/pandas/step.html#pandas-gallery-step](https://hvplot.holoviz.org/reference/pandas/step.html#pandas-gallery-step),  
if you hover over the lines the year is shown in scientific notation. I would like to see an example of how these values can be formatted.

 ![Screen Shot 2020-12-14 at 7.07.59 AM](https://discourse.holoviz.org/uploads/default/original/2X/7/7e5870026eda607f0f205da667cd7ccaf92e8dee.png)

---

<div class="post-metadata">

**Author:** ![ea42gh](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/ea42gh/32/73_2.png) [@ea42gh](https://discourse.holoviz.org/u/ea42gh)\
**Post date:** [December 14, 2020, 2:32pm UTC](https://discourse.holoviz.org/t/how-to-format-float-values-in-a-line-plot-hover/1557/2 "2020-12-14T14:32:41Z")

</div>

One way to customize the hover display is to use bokeh’s hovertool:

```auto
from bokeh.models import HoverTool
# Syntax: $. are 'special fields': $x inserts the x-coordinate
# @. are fields from the color data source:
# provide an extra column of values and declare it's name as a vdim (or sue a pd.DataFrame)

data = pd.DataFrame( { 'x': [1.1, 3.2, 5.8], 'state': ['NY', 'NJ', 'PA'], 'stuff': ['a','b','c']} )
hover = HoverTool(tooltips=[("error", "$x"),
                            ("state", "@state"),
                            ("stuff", "@stuff")
                           ])
hv.Scatter( data, kdims='x', vdims=['state', 'stuff']).opts(plot=dict(tools=[hover]), style=dict(size=10)).redim.range(x=(0,7))

```

Just realized the opts syntax is a bit out of date…

---

<div class="post-metadata">

**Author:** ![lhoupert](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/lhoupert/32/1471_2.png) [@lhoupert](https://discourse.holoviz.org/u/lhoupert)\
**Post date:** [December 15, 2020, 8:09am UTC](https://discourse.holoviz.org/t/how-to-format-float-values-in-a-line-plot-hover/1557/3 "2020-12-15T08:09:31Z")

</div>

I am also interested by this question. How would you format the hoovertool object for the example shared by @agstreet ? ([https://hvplot.holoviz.org/reference/pandas/step.html#pandas-gallery-step](https://hvplot.holoviz.org/reference/pandas/step.html#pandas-gallery-step))

If you want the year to be at the format YYYY (a four digit integer)? or at the float format (YYYY.yy)?

---

<div class="post-metadata">

**Author:** ![ea42gh](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/ea42gh/32/73_2.png) [@ea42gh](https://discourse.holoviz.org/u/ea42gh)\
**Post date:** [December 15, 2020, 1:14pm UTC](https://discourse.holoviz.org/t/how-to-format-float-values-in-a-line-plot-hover/1557/4 "2020-12-15T13:14:40Z")

</div>

you can use formatters with the Hovertool.  
See [https://docs.bokeh.org/en/latest/docs/user\_guide/tools.html](https://docs.bokeh.org/en/latest/docs/user_guide/tools.html)  
the sectiion entitled **Formatting Tooltip Fields**

also see [https://stackoverflow.com/questions/51496142/formatting-pandas-datetime-in-bokeh-hovertool](https://stackoverflow.com/questions/51496142/formatting-pandas-datetime-in-bokeh-hovertool)

```auto
df = pd.DataFrame( { 'x': [1.1, 3.2, 5.8],
                      'state': ['NY', 'NJ', 'PA'],
                      'stuff': ['a','b','c'],
                      'timestamp' :[1530479286336096,1530479286362156,1530479286472230]
                    } )
df['date'] = pd.to_datetime(df['timestamp'], unit='us')
display(df)
hover = HoverTool(tooltips=[("x", "@x"),
                            ("X", "$x{0.0000}"),
                            ("stuff", "@stuff"),
                            ("Date", "@date{%Y/%m/%d}")
                           ],
                  formatters = {
                            '@date': 'datetime'                         
                  }
                 )
display(df)
hv.Scatter( df, kdims='x', vdims=['state', 'stuff', 'date']).opts( tools=[hover], size=10).redim.range(x=(0,7))

```

---

<div class="post-metadata">

**Author:** ![lhoupert](https://discourse.holoviz.org/user_avatar/discourse.holoviz.org/lhoupert/32/1471_2.png) [@lhoupert](https://discourse.holoviz.org/u/lhoupert)\
**Post date:** [December 15, 2020, 2:05pm UTC](https://discourse.holoviz.org/t/how-to-format-float-values-in-a-line-plot-hover/1557/5 "2020-12-15T14:05:12Z")

</div>

Thank you ! I am going to look into this!

---

<div class="post-metadata">

**Author:** ![agstreet](https://discourse.holoviz.org/letter_avatar_proxy/v4/letter/a/7cd45c/32.png) [@agstreet](https://discourse.holoviz.org/u/agstreet)\
**Post date:** [December 15, 2020, 2:28pm UTC](https://discourse.holoviz.org/t/how-to-format-float-values-in-a-line-plot-hover/1557/6 "2020-12-15T14:28:26Z")

</div>

I second that. Thanks! I was able to connect the dots enough based on this post to get this approach working and format my hover values. The downside was that I ended up reimplementing my figure without the hvPlot layer. I still need to figure out how to reconnect it to hvPlot. But I am super grateful for this progress!

---

<div class="post-metadata">

**Author:** ![agstreet](https://discourse.holoviz.org/letter_avatar_proxy/v4/letter/a/7cd45c/32.png) [@agstreet](https://discourse.holoviz.org/u/agstreet)\
**Post date:** [December 15, 2020, 2:38pm UTC](https://discourse.holoviz.org/t/how-to-format-float-values-in-a-line-plot-hover/1557/7 "2020-12-15T14:38:13Z")

</div>

## Here was my code in hvPlot…

import hvplot.pandas # noqa

tp\_df.hvplot.step(x=‘final\_settle\_date\_time’, y=‘p\_cash\_account’, xlabel=‘Final Settle Date’,  
ylabel=‘Cash Balance’, hover=True, hover\_cols=‘all’)

---

<div class="post-metadata">

**Author:** ![agstreet](https://discourse.holoviz.org/letter_avatar_proxy/v4/letter/a/7cd45c/32.png) [@agstreet](https://discourse.holoviz.org/u/agstreet)\
**Post date:** [December 15, 2020, 2:40pm UTC](https://discourse.holoviz.org/t/how-to-format-float-values-in-a-line-plot-hover/1557/8 "2020-12-15T14:40:53Z")

</div>

…and here is my code without hvPlot (attached).

 ![Screen Shot 2020-12-15 at 8.29.01 AM](https://discourse.holoviz.org/uploads/default/original/2X/1/1b111a688cccf94a9a2a0b98db99147cff20d58a.png)  
The new code works great but is more complex and lacks the value provided by hvPlot.