You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: doc/python/hover-text-and-formatting.md
+49-4
Original file line number
Diff line number
Diff line change
@@ -123,7 +123,7 @@ fig.show()
123
123
124
124
### Customizing Hover text with Plotly Express
125
125
126
-
Plotly Express functions automatically add all the data being plotted (x, y, color etc) to the hover label. Many Plotly Express functions also support configurable hover text. The `hover_data` argument accepts a list of column names to be added to the hover tooltip. The `hover_name` property controls which column is displayed in bold as the tooltip title.
126
+
Plotly Express functions automatically add all the data being plotted (x, y, color etc) to the hover label. Many Plotly Express functions also support configurable hover text. The `hover_data` argument accepts a list of column names to be added to the hover tooltip, or a dictionary for advanced formatting (see the next section). The `hover_name` property controls which column is displayed in bold as the tooltip title.
127
127
128
128
Here is an example that creates a scatter plot using Plotly Express with custom hover data and a custom hover name.
### Disabling or customizing hover of columns in plotly express
142
+
143
+
`hover_data` can also be a dictionary. Its keys are existing columns of the `dataframe` argument, or new labels. For an existing column, the values can be
144
+
*`False` to remove the column from the hover data (for example, if one wishes to remove the column of the `x` argument)
145
+
*`True` to add a different column, with default formatting
146
+
* a formatting string starting with `:` for numbers [d3-format's syntax](https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#d3_forma), and `|` for dates in [d3-time-format's syntax](https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md#format), for example `:.3f`, `|%a`.
147
+
148
+
It is also possible to pass new data as values of the `hover_data` dict, either as list-like data, or inside a tuple, which first element is one of the possible values described above for existing columns, and the second element correspond to the list-like data, for example `(True, [1, 2, 3])` or `(':.1f', [1.54, 2.345])`.
149
+
150
+
These different cases are illustrated in the following example.
hover_data={'species':False, # remove species from hover data
158
+
'sepal_length':':.2f', # customize hover for column of y attribute
159
+
'petal_width':True, # add other column, default formatting
160
+
'sepal_width':':.2f', # add other column, customized formatting
161
+
# data not in dataframe, default formatting
162
+
'suppl_1': np.random.random(len(df)),
163
+
# data not in dataframe, customized formatting
164
+
'suppl_2': (':.3f', np.random.random(len(df)))
165
+
})
166
+
fig.update_layout(height=300)
167
+
fig.show()
168
+
```
169
+
141
170
### Customizing hover text with a hovertemplate
142
171
143
-
To customize the tooltip on your graph you can use [hovertemplate](https://plotly.com/python/reference/#pie-hovertemplate), which is a template string used for rendering the information that appear on hoverbox.
172
+
To customize the tooltip on your graph you can use the [hovertemplate](https://plotly.com/python/reference/#pie-hovertemplate) attribute of `graph_objects` tracces, which is a template string used for rendering the information that appear on hoverbox.
144
173
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-format's syntax](https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md#format).
145
174
Hovertemplate customize the tooltip text vs. [texttemplate](https://plotly.com/python/reference/#pie-texttemplate) which customizes the text that appears on your chart. <br>
146
175
Set the horizontal alignment of the text within tooltip with [hoverlabel.align](https://plotly.com/python/reference/#layout-hoverlabel-align).
147
176
148
-
Plotly Express automatically sets the `hovertemplate`, but you can set it manually when using `graph_objects`.
149
-
150
177
```python
151
178
import plotly.graph_objects as go
152
179
@@ -187,6 +214,24 @@ fig = go.Figure(go.Pie(
187
214
fig.show()
188
215
```
189
216
217
+
### Modifying the hovertemplate of a plotly express figure
218
+
219
+
`plotly.express` automatically sets the hovertemplate but you can modify it using the `update_traces` method of the generated figure. It helps to print the hovertemplate generated by `plotly.express` in order to be able to modify it. One can also revert to the default hover information of traces by setting the hovertemplate to `None`.
The following example shows how to format hover template. [Here](https://plotly.com/python/v3/hover-text-and-formatting/#dash-example) is an example to see how to format hovertemplate in Dash.
0 commit comments