Skip to content

Commit 2ecd080

Browse files
committed
Add unifiedhovertitle example
1 parent f19bbf8 commit 2ecd080

File tree

1 file changed

+53
-2
lines changed

1 file changed

+53
-2
lines changed

doc/python/hover-text-and-formatting.md

Lines changed: 53 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ jupyter:
66
extension: .md
77
format_name: markdown
88
format_version: '1.3'
9-
jupytext_version: 1.16.1
9+
jupytext_version: 1.17.2
1010
kernelspec:
1111
display_name: Python 3 (ipykernel)
1212
language: python
@@ -20,7 +20,7 @@ jupyter:
2020
name: python
2121
nbconvert_exporter: python
2222
pygments_lexer: ipython3
23-
version: 3.10.11
23+
version: 3.12.4
2424
plotly:
2525
description: How to use hover text and formatting in Python with Plotly.
2626
display_as: file_settings
@@ -83,6 +83,57 @@ fig.update_layout(hovermode="x unified")
8383
fig.show()
8484
```
8585

86+
#### Customize Title in Unified Hovermode
87+
88+
*New in 6.3*
89+
90+
Customize the title shown in unified hovermode, by specifing `unifiedhovertitle.text`.
91+
92+
The unified hover title is a template string that supports using variables from the data. Numbers are formatted using d3-format's syntax `%{variable:d3-format}`, for `example \"Price: %{y:$.2f}\"`. Dates are formatted using d3-time-format's syntax `%{variable|d3-time-format}`, for example `\"Day: %{2019-01-01|%A}\"`.
93+
94+
The following example uses `'x unified'` hover and specifies a unified hover title that shows the full weekday, month, day, and year.
95+
96+
```python
97+
import plotly.graph_objects as go
98+
import plotly.express as px
99+
100+
df = px.data.stocks()
101+
102+
fig = go.Figure(
103+
data=[
104+
go.Scatter(
105+
x=df['date'],
106+
y=df['GOOG'],
107+
mode='lines',
108+
name='Google'
109+
),
110+
go.Scatter(
111+
x=df['date'],
112+
y=df['AAPL'],
113+
mode='lines',
114+
name='Apple'
115+
)
116+
],
117+
layout=go.Layout(
118+
title_text="Stock Prices with Custom Unified Hover Title",
119+
hovermode='x unified',
120+
xaxis=dict(
121+
title_text='Date',
122+
unifiedhovertitle=dict(
123+
text='<b>%{x|%A, %B %d, %Y}</b>'
124+
)
125+
),
126+
yaxis=dict(
127+
title_text='Price (USD)',
128+
tickprefix='$'
129+
)
130+
)
131+
)
132+
133+
fig.show()
134+
135+
```
136+
86137
#### Control hovermode with Dash
87138

88139
[Dash](https://plotly.com/dash/) is the best way to build analytical apps in Python using Plotly figures. To run the app below, run `pip install dash`, click "Download" to get the code and run `python app.py`.

0 commit comments

Comments
 (0)