Skip to content

Commit f072031

Browse files
author
“mahdis-z”
committed
hovertemplate were added to the current hover-text file
1 parent 234fb0a commit f072031

File tree

1 file changed

+95
-1
lines changed

1 file changed

+95
-1
lines changed

python/hover-text-and-formatting.md

Lines changed: 95 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,5 +104,99 @@ fig.update_yaxes(hoverformat=".2f")
104104
fig.show()
105105
```
106106

107+
### Customize tooltip text with a hovertemplate
108+
109+
To customize the tooltip on your graph you can use [hovertemplate](https://plot.ly/python/reference/#pie-hovertemplate), which is a template string used for rendering the information that appear on hoverbox.
110+
This template string can include `variables` in %{variable} format, `numbers` in [d3-format's syntax](https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#d3_forma), and `date` in [d3-time-fomrat's syntax](https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md#format).
111+
Hovertemplate customize the tooltip text vs. [texttemplate](https://plot.ly/python/reference/#pie-texttemplate) which customizes the text that appears on your chart.
112+
113+
```python
114+
import plotly.graph_objects as go
115+
116+
fig = go.Figure(go.Pie(
117+
name = "",
118+
values = [2, 5, 3, 2.5],
119+
labels = ["R", "Python", "Java Script", "Matlab"],
120+
text = ["textA", "TextB", "TextC", "TextD"],
121+
hovertemplate = "%{label}: <br>Popularity: %{percent} </br> %{text}"
122+
))
123+
124+
fig.show()
125+
```
126+
127+
### Format Hover Template
128+
129+
```python
130+
import plotly.io as pio
131+
import plotly.express as px
132+
133+
df = px.data.gapminder()
134+
A = []
135+
B = []
136+
137+
for i in range(5):
138+
A = {'target': df['continent'][[i]].unique()}
139+
B.append(A)
140+
141+
data = [{
142+
'type': 'scatter',
143+
'mode': 'markers',
144+
'x': df['lifeExp'],
145+
'y': df['gdpPercap'],
146+
'text': df['continent'],
147+
'hovertemplate':
148+
"<b>%{text}</b><br><br>" +
149+
"GDP per Capita: %{y:$,.0f}<br>" +
150+
"Life Expectation: %{x:.0%}<br>" +
151+
"Population: %{marker.size:,}" +
152+
"<extra></extra>",
153+
'marker': {
154+
'size': df['pop'],
155+
'sizemode': 'area',
156+
'sizeref': 200000
157+
},
158+
'transforms': [{
159+
'type': 'filter',
160+
'target': df['year'],
161+
'orientation': '=',
162+
'value': 2002
163+
},{
164+
'type': 'groupby',
165+
'groups': df['continent'],
166+
'styles': B
167+
}]
168+
}]
169+
170+
layout = {'yaxis': {'type': 'log'}}
171+
172+
pio.show({'data': data, 'layout': layout}, validate=False)
173+
```
174+
175+
### Set Hover Template in Mapbox
176+
```python
177+
import plotly.graph_objects as go
178+
179+
token = open(".mapbox_token").read() # you need your own token
180+
181+
fig = go.Figure(go.Scattermapbox(
182+
name = "",
183+
mode = "markers+text+lines",
184+
lon = [-75, -80, -50],
185+
lat = [45, 20, -20],
186+
marker = {'size': 20, 'symbol': ["bus", "harbor", "airport"]},
187+
hovertemplate =
188+
"<b>%{marker.symbol} </b><br><br>" +
189+
"longitude: %{lon}<br>" +
190+
"latitude: %{lat}<br>" ))
191+
192+
fig.update_layout(
193+
mapbox = {
194+
'accesstoken': token,
195+
'style': "outdoors", 'zoom': 1},
196+
showlegend = False)
197+
198+
fig.show()
199+
```
200+
107201
#### Reference
108-
See https://plot.ly/python/reference/ for more information and chart attribute options!
202+
See https://plot.ly/python/reference/ for more information and chart attribute options!

0 commit comments

Comments
 (0)