How to create customised hovers in plotly?

📊 Plotly Python
1

Hey everyone,

I’ve been working with plotly to generate visualizations. I want to customize the hover box in plotly to show a HTML card. Is it possible to do so? Here’s a sample hover card that I’d like to integrate.

Screenshot from 2020-03-28 13-41-22

Thanks.

2

Hi @adityasoni, welcome to the forum! Images in hover is something which we have in the roadmap (see https://github.com/plotly/plotly.js/issues/1323). If someone here knows an organization which could fund this development. this would probably accelerate it.

3

Hi, @Emmanuelle, thanks for the response. I have submitted a consultation request via your website referring this thread. Meanwhile is there a callback available for graph hover action which will return the index or position of the data point over which the user is hovering which we can then use to render the above UI element somewhere else in the UI?

4

Hi @5hirish thank you for your interest in developing plotly! For your other question, this is easily done with Dash, see for example the https://dash.plotly.com/interactive-graphing tutorial.

Without Dash, you can use a FigureWidget inside a notebook environment. For example the example of https://plotly.com/python/click-events/#update-points-using-a-click-callback can be adapted to hover data with

import plotly.graph_objects as go

import numpy as np
np.random.seed(1)

x = np.random.rand(100)
y = np.random.rand(100)

f = go.FigureWidget([go.Scatter(x=x, y=y, mode='markers')])

scatter = f.data[0]
colors = ['#a3a7e4'] * 100
scatter.marker.color = colors
scatter.marker.size = [10] * 100
f.layout.hovermode = 'closest'


# create our callback function
def update_point(trace, points, selector):
    c = list(scatter.marker.color)
    s = list(scatter.marker.size)
    for i in points.point_inds:
        c[i] = '#bae2be'
        s[i] = 20
        print(i)
        with f.batch_update():
            scatter.marker.color = c
            scatter.marker.size = s


scatter.on_hover(update_point)

f
1 Like