Hover Text and Formatting in Python

How to use hover text and formatting in Python with Plotly.

New to Plotly?¶

Plotly's Python library is free and open source! Get started by downloading the client and reading the primer.
You can set up Plotly to work in online or offline mode, or in jupyter notebooks.
We also have a quick-reference cheatsheet (new!) to help you get started!

Version Check¶

Plotly's python package is updated frequently. Run pip install plotly --upgrade to use the latest version.

In [2]:

import plotly
plotly.__version__

Out[2]:

'2.3.0'

Add Hover Text¶

In [3]:

import plotly.plotly as py
import plotly.graph_objs as go

data = [
    go.Scatter(
        x = [1,2,3,4,5],
        y = [2,1,6,4,4],
        text = ["Text A", "Text B", "Text C", "Text D", "Text E"],
        hoverinfo = 'text',
        marker = dict(
            color = 'green'
        ),
        showlegend = False
    )
]

py.iplot(data, filename = "add-hover-text")

Out[3]:

Format Hover Text¶

In [4]:

import plotly.plotly as py
import plotly.graph_objs as go

data = [
    go.Scatter(
        x = [1,2,3,4,5],
        y = [2.02825,1.63728,6.83839,4.8485,4.73463],
        hoverinfo = 'y',
        marker = dict(
            color = 'green'
        ),
        showlegend = False
    )
]

layout = go.Layout(
    title = "Set hover text formatting<br><a href= https://github.com/d3/d3-time-format/blob/master/README.md#locale_format>https://github.com/d3/d3-time-format/blob/master/README.md#locale_format</a>",
    titlefont = dict(
        size = 10
    ),
    xaxis = dict(
        zeroline = False
    ),
    yaxis = dict(
        hoverformat = '.2f'
    )
)

fig = go.Figure(data=data,layout=layout)
py.iplot(fig, filename = "format-hover-text")

Out[4]:

Dash Example¶

Dash is an Open Source Python library which can help you convert plotly figures into a reactive, web-based application. Below is a simple example of a dashboard created using Dash. Its source code can easily be deployed to a PaaS.

In [4]:

from IPython.display import IFrame
IFrame(src= "https://dash-simple-apps.plotly.host/dash-hoverplot/", width="100%", height="920px", frameBorder="0")

Out[4]:

In [1]:

from IPython.display import IFrame
IFrame(src= "https://dash-simple-apps.plotly.host/dash-hoverplot/code", width="100%", height=500, frameBorder="0")

Out[1]: