diff --git a/python/hover-text-and-formatting.md b/python/hover-text-and-formatting.md index f73fd7d14..d5972edc1 100644 --- a/python/hover-text-and-formatting.md +++ b/python/hover-text-and-formatting.md @@ -6,7 +6,7 @@ jupyter: extension: .md format_name: markdown format_version: '1.1' - jupytext_version: 1.1.7 + jupytext_version: 1.2.1 kernelspec: display_name: Python 3 language: python @@ -20,7 +20,7 @@ jupyter: name: python nbconvert_exporter: python pygments_lexer: ipython3 - version: 3.6.5 + version: 3.7.3 plotly: description: How to use hover text and formatting in Python with Plotly. display_as: file_settings @@ -104,5 +104,129 @@ fig.update_yaxes(hoverformat=".2f") fig.show() ``` +### Customize tooltip text with a hovertemplate + +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. +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). +Hovertemplate customize the tooltip text vs. [texttemplate](https://plot.ly/python/reference/#pie-texttemplate) which customizes the text that appears on your chart. + +```python +import plotly.graph_objects as go + +fig = go.Figure(go.Scatter( + x = [1,2,3,4,5], + y = [2.02825,1.63728,6.83839,4.8485,4.73463], + hovertemplate = + 'Price: $%{y:.2f}'+ + '
X: %{x}
'+ + '%{text}', + text = ['Custom text {}'.format(i + 1) for i in range(5)], + showlegend = False)) + +fig.add_trace(go.Scatter( + x = [1,2,3,4,5], + y = [3.02825,2.63728,4.83839,3.8485,1.73463], + hovertemplate = 'Price: %{y:$.2f}', + showlegend = False)) + +fig.update_layout(title = "Set hover text with hovertemplate") + +fig.show() +``` + +```python +import plotly.graph_objects as go + +fig = go.Figure(go.Pie( + name = "", + values = [2, 5, 3, 2.5], + labels = ["R", "Python", "Java Script", "Matlab"], + text = ["textA", "TextB", "TextC", "TextD"], + hovertemplate = "%{label}:
Popularity: %{percent}
%{text}" +)) + +fig.show() +``` + +### Advanced Hover Template +The following example shows how to format hover template. [Here](https://plot.ly/python/v3/hover-text-and-formatting/#dash-example) is an example to see how to format hovertemplate in Dash. + +```python +import plotly.graph_objects as go +import plotly.express as px +import pandas as pd +import math + +data = px.data.gapminder() +df_2007 = data[data['year']==2007] +df_2007 = df_2007.sort_values(['continent', 'country']) + +bubble_size = [] + +for index, row in df_2007.iterrows(): + bubble_size.append(math.sqrt(row['pop'])) + +df_2007['size'] = bubble_size +continent_names = ['Africa', 'Americas', 'Asia', 'Europe', 'Oceania'] +continent_data = {continent:df_2007.query("continent == '%s'" %continent) + for continent in continent_names} + +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=df_2007['continent'], + hovertemplate= + "%{text}

" + + "GDP per Capita: %{y:$,.0f}
" + + "Life Expectation: %{x:.0%}
" + + "Population: %{marker.size:,}" + + "", + marker_size=continent['size'], + )) + +fig.update_traces( + mode='markers', + marker={'sizemode':'area', + 'sizeref':10}) + +fig.update_layout( + xaxis={ + 'title':'GDP per capita', + 'type':'log'}, + yaxis={'title':'Life Expectancy (years)'}) + +fig.show() +``` + +### Set Hover Template in Mapbox +```python +import plotly.graph_objects as go + +token = open(".mapbox_token").read() # you need your own token + +fig = go.Figure(go.Scattermapbox( + name = "", + mode = "markers+text+lines", + lon = [-75, -80, -50], + lat = [45, 20, -20], + marker = {'size': 20, 'symbol': ["bus", "harbor", "airport"]}, + hovertemplate = + "%{marker.symbol}

" + + "longitude: %{lon}
" + + "latitude: %{lat}
" )) + +fig.update_layout( + mapbox = { + 'accesstoken': token, + 'style': "outdoors", 'zoom': 1}, + showlegend = False) + +fig.show() +``` + #### Reference See https://plot.ly/python/reference/ for more information and chart attribute options!