-
-
Notifications
You must be signed in to change notification settings - Fork 2.7k
Update hover-text-and-formatting.md #4557
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from 2 commits
Commits
Show all changes
10 commits
Select commit
Hold shift + click to select a range
d628817
Update hover-text-and-formatting.md
rl-utility-man 1e63ed4
Update doc/python/hover-text-and-formatting.md
LiamConnors 70655ea
Update doc/python/hover-text-and-formatting.md
LiamConnors 02cf1b1
Update doc/python/hover-text-and-formatting.md
LiamConnors 7c4b954
Update doc/python/hover-text-and-formatting.md
LiamConnors fb060bd
Update doc/python/hover-text-and-formatting.md
LiamConnors b06b80b
Update doc/python/hover-text-and-formatting.md
LiamConnors 2e34c04
Merge branch 'doc-prod' into patch-5
LiamConnors eba6910
Update doc/python/hover-text-and-formatting.md
LiamConnors 217ed66
Update doc/python/hover-text-and-formatting.md
LiamConnors File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
|
@@ -252,6 +252,58 @@ print("user_defined hovertemplate:", fig.data[0].hovertemplate) | |||||
fig.show() | ||||||
``` | ||||||
|
||||||
### Specifying the formatting and labeling of custom fields in a Plotly Express figure using a hovertemplate | ||||||
|
||||||
This example adds custom fields to a Plotly Express figure using the custom_data parameter and then adds a hover template that applies d3 formats to each element of the customdata[n] array and uses HTML to customize the fonts and spacing. | ||||||
|
||||||
``` | ||||||
LiamConnors marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
# %% | ||||||
import plotly.graph_objects as go | ||||||
import plotly.express as px | ||||||
import pandas as pd | ||||||
import math | ||||||
import numpy as np | ||||||
|
||||||
data = px.data.gapminder() | ||||||
df = data[data['year']==2007] | ||||||
df = df.sort_values(['continent', 'country']) | ||||||
|
||||||
df.rename(columns={"gdpPercap":'GDP per capita', "lifeExp":'Life Expectancy (years)'}, inplace=True) | ||||||
|
||||||
fig=px.scatter(df, | ||||||
x='GDP per capita', | ||||||
y='Life Expectancy (years)', | ||||||
color='continent', | ||||||
size=np.sqrt(df['pop']), | ||||||
# Specifying data to make available to the hovertemplate | ||||||
# The px custom_data parameter has an underscore, whike the analogous graph objects customdata parameter has no underscore. | ||||||
LiamConnors marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
# The px custom_data parameter is a list of column names in the data frame, while the graph objects customdata parameter expects a data frame or a numpy array. | ||||||
custom_data=['country', 'continent', 'pop'], | ||||||
) | ||||||
|
||||||
# Plotly express does not have a hovertemplate paramter in the graph creation function, so we apply the template with update_traces | ||||||
LiamConnors marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
fig.update_traces( | ||||||
hovertemplate = | ||||||
"<b>%{customdata[0]}</b><br>" + | ||||||
"<b>%{customdata[1]}</b><br><br>" + | ||||||
"GDP per Capita: %{x:$,.0f}<br>" + | ||||||
"Life Expectation: %{y:.0f}<br>" + | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
"Population: %{customdata[2]:,.0f}" + | ||||||
"<extra></extra>", | ||||||
mode='markers', | ||||||
marker={'sizemode':'area', | ||||||
'sizeref':10}, | ||||||
) | ||||||
|
||||||
fig.update_layout( | ||||||
xaxis={ | ||||||
'type':'log'}, | ||||||
) | ||||||
|
||||||
fig.show() | ||||||
``` | ||||||
|
||||||
|
||||||
### Hover Templates with Mixtures of Period data | ||||||
|
||||||
*New in v5.0* | ||||||
|
@@ -288,9 +340,8 @@ fig.show() | |||||
|
||||||
### Advanced Hover Template | ||||||
|
||||||
The following example shows how to format a hover template. | ||||||
|
||||||
```python | ||||||
This produces the same graphic as in "Specifying the formatting and labeling of custom fields in a Plotly Express figure using a hovertemplate" above, but does so with the `customdata` and `text` parameters of `graph_objects`. It shows how to specify columns from a dataframe to include in the customdata array using the df[["col_i", "col_j"]] subsetting notation. It then references those variables using e.g. %{customdata[0]} in the hovertemplate. It includes comments about major differences between the parameters used by `graph_objects` and `plotly.express`. | ||||||
``` | ||||||
LiamConnors marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
import plotly.graph_objects as go | ||||||
import plotly.express as px | ||||||
import pandas as pd | ||||||
|
@@ -312,21 +363,31 @@ continent_data = {continent:df_2007.query("continent == '%s'" %continent) | |||||
|
||||||
fig = go.Figure() | ||||||
|
||||||
for continent_name, continent in continent_data.items(): | ||||||
fig.add_trace(go.Scatter( | ||||||
x=continent['gdpPercap'], | ||||||
y=continent['lifeExp'], | ||||||
name=continent_name, | ||||||
text=continent['continent'], | ||||||
hovertemplate= | ||||||
"<b>%{text}</b><br><br>" + | ||||||
"GDP per Capita: %{x:$,.0f}<br>" + | ||||||
"Life Expectation: %{y:.0%}<br>" + | ||||||
"Population: %{marker.size:,}" + | ||||||
"<extra></extra>", | ||||||
marker_size=continent['size'], | ||||||
for continent_name, df in continent_data.items(): | ||||||
fig.add_trace( | ||||||
go.Scatter( | ||||||
x=df['gdpPercap'], | ||||||
y=df['lifeExp'], | ||||||
marker_size=df['size'], | ||||||
name=continent_name, | ||||||
|
||||||
# The next three parameters specify the hover text | ||||||
# Text supports just one customized field per trace, but is simple to implement | ||||||
text=df['continent'], | ||||||
LiamConnors marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
# Custom data supports multiple fields through numeric indices in the hovertemplate | ||||||
# If I were not looking for an opportunity to demonstrate the text parameter, | ||||||
# I would likely just add continent as a third customdata field. | ||||||
LiamConnors marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
customdata=df[['country','pop']], | ||||||
hovertemplate= | ||||||
"<b>%{customdata[0]}</b><br>" + | ||||||
"<b>%{text}</b><br><br>" + | ||||||
"GDP per Capita: %{x:$,.0f}<br>" + | ||||||
"Life Expectancy: %{y:.0f}<br>" + | ||||||
"Population: %{customdata[1]:,.0f}" + | ||||||
"<extra></extra>", | ||||||
)) | ||||||
|
||||||
|
||||||
fig.update_traces( | ||||||
mode='markers', | ||||||
marker={'sizemode':'area', | ||||||
|
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.