|
| 1 | +--- |
| 2 | +jupyter: |
| 3 | + jupytext: |
| 4 | + notebook_metadata_filter: all |
| 5 | + text_representation: |
| 6 | + extension: .md |
| 7 | + format_name: markdown |
| 8 | + format_version: '1.1' |
| 9 | + jupytext_version: 1.2.1 |
| 10 | + kernelspec: |
| 11 | + display_name: Python 3 |
| 12 | + language: python |
| 13 | + name: python3 |
| 14 | + language_info: |
| 15 | + codemirror_mode: |
| 16 | + name: ipython |
| 17 | + version: 3 |
| 18 | + file_extension: .py |
| 19 | + mimetype: text/x-python |
| 20 | + name: python |
| 21 | + nbconvert_exporter: python |
| 22 | + pygments_lexer: ipython3 |
| 23 | + version: 3.7.3 |
| 24 | + plotly: |
| 25 | + description: How to use hover template in Python with Plotly. |
| 26 | + display_as: file_settings |
| 27 | + has_thumbnail: true |
| 28 | + ipynb: ~notebook_demo/60 |
| 29 | + language: python |
| 30 | + layout: base |
| 31 | + name: Hover Template |
| 32 | + order: 40 |
| 33 | + page_type: u-guide |
| 34 | + permalink: python/hovertemplate/ |
| 35 | + thumbnail: thumbnail/hovertemplate.jpg |
| 36 | + title: Hover Template and Formatting| plotly |
| 37 | + v4upgrade: true |
| 38 | +--- |
| 39 | + |
| 40 | +### Add Hover Template to Pie Chart |
| 41 | + |
| 42 | +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. |
| 43 | + |
| 44 | +```python |
| 45 | +import plotly.graph_objects as go |
| 46 | + |
| 47 | +fig = go.Figure(go.Pie( |
| 48 | + name = "", |
| 49 | + values = [2, 5, 3, 2.5], |
| 50 | + labels = ["R", "Python", "Java Script", "Matlab"], |
| 51 | + text = ["textA", "TextB", "TextC", "TextD"], |
| 52 | + hovertemplate = "%{label}: <br>Popularity: %{percent} </br> %{text}" |
| 53 | +)) |
| 54 | + |
| 55 | +fig.show() |
| 56 | +``` |
| 57 | + |
| 58 | +### Format Hover Template |
| 59 | + |
| 60 | +```python |
| 61 | +import plotly.io as pio |
| 62 | +import pandas as pd |
| 63 | + |
| 64 | +df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv") |
| 65 | +A = [] |
| 66 | +B = [] |
| 67 | + |
| 68 | +for i in range(5): |
| 69 | + A = {'target': df['continent'][[i]].unique()} |
| 70 | + B.append(A) |
| 71 | + |
| 72 | +data = [{ |
| 73 | + 'type': 'scatter', |
| 74 | + 'mode': 'markers', |
| 75 | + 'x': df['lifeExp'], |
| 76 | + 'y': df['gdpPercap'], |
| 77 | + 'text': df['continent'], |
| 78 | + 'hovertemplate': |
| 79 | + "<b>%{text}</b><br><br>" + |
| 80 | + "GDP per Capita: %{y:$,.0f}<br>" + |
| 81 | + "Life Expectation: %{x:.0%}<br>" + |
| 82 | + "Population: %{marker.size:,}" + |
| 83 | + "<extra></extra>", |
| 84 | + 'marker': { |
| 85 | + 'size': df['pop'], |
| 86 | + 'sizemode': 'area', |
| 87 | + 'sizeref': 200000 |
| 88 | + }, |
| 89 | + 'transforms': [{ |
| 90 | + 'type': 'filter', |
| 91 | + 'target': df['year'], |
| 92 | + 'orientation': '=', |
| 93 | + 'value': 2002 |
| 94 | + },{ |
| 95 | + 'type': 'groupby', |
| 96 | + 'groups': df['continent'], |
| 97 | + 'styles': B |
| 98 | + }] |
| 99 | +}] |
| 100 | + |
| 101 | +layout = {'yaxis': {'type': 'log'}} |
| 102 | + |
| 103 | +pio.show({'data': data, 'layout': layout}, validate=False) |
| 104 | +``` |
| 105 | + |
| 106 | +### Set Hover Template to Mapbox |
| 107 | + |
| 108 | +```python |
| 109 | +import plotly.graph_objects as go |
| 110 | + |
| 111 | +token = open(".mapbox_token").read() # you need your own token |
| 112 | + |
| 113 | +fig = go.Figure(go.Scattermapbox( |
| 114 | + name = "", |
| 115 | + mode = "markers+text+lines", |
| 116 | + lon = [-75, -80, -50], |
| 117 | + lat = [45, 20, -20], |
| 118 | + marker = {'size': 20, 'symbol': ["bus", "harbor", "airport"]}, |
| 119 | + hovertemplate = |
| 120 | + "<b>%{marker.symbol} </b><br><br>" + |
| 121 | + "longitude: %{lon}<br>" + |
| 122 | + "latitude: %{lat}<br>" )) |
| 123 | + |
| 124 | +fig.update_layout( |
| 125 | + mapbox = { |
| 126 | + 'accesstoken': token, |
| 127 | + 'style': "outdoors", 'zoom': 1}, |
| 128 | + showlegend = False) |
| 129 | + |
| 130 | +fig.show() |
| 131 | +``` |
0 commit comments