Plotly: How to edit unified hoverlabel?

user_9214357 0
Viewed 7843

I am generating a graph with two different contour lines. When I hover the mouse over the graph it compares a menu with the values of the two contours as in the image:

enter image description here

I obtained this result with this code:

# IMPORT
import plotly.graph_objs as go
import plotly.offline as pyo
import numpy as np

# CONSTANTS SET UP
N = 11
x_min = 0
x_max = 10
y_min = 0
y_max = 10
fontsize = 18

# COLORS SET UP
blue = '#6683f3'
orange = '#ff9266'
black = '#212121'

# DEFINE THE MESH GRID
x = np.linspace(x_min, x_max, N)
y = np.linspace(y_min, y_max, N)
XX, YY = np.meshgrid(x, y)

# CALCULATE Z1 AND Z2
Z1 = XX + YY
Z2 = XX - YY

# DEFINE THE TRACES LIST
data = [go.Contour(z = Z1,
                   transpose = True,
                   name = 'Z1',
                   zmin = np.min(Z1),
                   zmax = np.max(Z1) + 1,
                   hovertemplate = 'Z1 = %{z: .0f}<extra></extra>',
                   contours_coloring = 'lines',
                   showscale = False,
                   showlegend = True,
                   colorscale = [[0, orange], [1, orange]],
                   line_width = 4,
                   ncontours = 20,
                   contours = dict(showlabels = True,
                                   labelformat = '.0f',
                                   labelfont = dict(size = 18))),
        go.Contour(z = Z2,
                   transpose = True,
                   name = 'Z2',
                   zmin = np.min(Z2),
                   zmax = np.max(Z2) + 1,
                   hovertemplate = 'Z2 = %{z: .0f}<extra></extra>',
                   contours_coloring = 'lines',
                   showscale = False,
                   showlegend = True,
                   colorscale = [[0, blue], [1, blue]],
                   line_width = 4,
                   ncontours = 20,
                   contours = dict(showlabels = True,
                                   labelformat = '.0f',
                                   labelfont = dict(size = fontsize)))]

# DEFINE THE LAYOUT
layout = go.Layout(plot_bgcolor = black,
                   hovermode = 'x')

# DEFINE THE FIGURE
figure = go.Figure(data = data,
                   layout = layout)

# IMPROVE LEGEND AND HOVERLABEL ASPECT
figure.update_layout(legend = dict(itemsizing = 'constant',
                                   font = dict(size = fontsize)),
                     hoverlabel = dict(font_size = fontsize))

# PLOT THE FIGURE
pyo.plot(figure)

In the layout definition section, if I replace hovermode = 'x' with hovermode = 'x unified' I get this result:

enter image description here

I would like to remove from this menu the first line that contains the information on the x. I honestly don't know where to start, I tried to consult the plotly documentation but I did not get any clue.
What I would get (image manually edited):

enter image description here

A possible alternative would be to improve the appearance of the menu that appears in the first image:

  • adding a unique background for the two contours
  • adding a colored line for each contour

Version info:

Python  4.7.0
dash    1.12.0
plotly  4.7.0
contour plotly css html python
1 Answers

If this is your desired output:

enter image description here

Then just include:

figure.update_traces(hoverinfo = 'name+z')

And, for both go.Contour, drop the hovertemplate parts:

 #hovertemplate = 'Z1 = %{z: .0f}<extra></extra>',
 .
 .
 #hovertemplate = 'Z2 = %{z: .0f}<extra></extra>',

Plot:

enter image description here

Some important details:

It seems that figure.update_traces(hoverinfo = 'name+z') or similar setups will have noe effect if a hovertemplate has been defined in go.Contour(). At least that is what I've found to be the case. Please let me know if you make any other discoveries after testing this!

Complete code:

# IMPORT
import plotly.graph_objs as go
import plotly.offline as pyo
import numpy as np

# CONSTANTS SET UP
N = 11
x_min = 0
x_max = 10
y_min = 0
y_max = 10
fontsize = 18

# COLORS SET UP
blue = '#6683f3'
orange = '#ff9266'
black = '#212121'

# DEFINE THE MESH GRID
x = np.linspace(x_min, x_max, N)
y = np.linspace(y_min, y_max, N)
XX, YY = np.meshgrid(x, y)

# CALCULATE Z1 AND Z2
Z1 = XX + YY
Z2 = XX - YY

# DEFINE THE TRACES LIST
data = [go.Contour(z = Z1,
                   transpose = True,
                   name = 'Z1',
                   zmin = np.min(Z1),
                   zmax = np.max(Z1) + 1,
                   #hovertemplate = 'Z1 = %{z: .0f}<extra></extra>',
                   contours_coloring = 'lines',
                   showscale = False,
                   showlegend = True,
                   colorscale = [[0, orange], [1, orange]],
                   line_width = 4,
                   ncontours = 20,
                   contours = dict(showlabels = True,
                                   labelformat = '.0f',
                                   labelfont = dict(size = 18))),
        go.Contour(z = Z2,
                   transpose = True,
                   name = 'Z2',
                   zmin = np.min(Z2),
                   zmax = np.max(Z2) + 1,
                  # hovertemplate = 'Z2 = %{z: .0f}<extra></extra>',
                   contours_coloring = 'lines',
                   showscale = False,
                   showlegend = True,
                   colorscale = [[0, blue], [1, blue]],
                   line_width = 4,
                   ncontours = 20,
                   contours = dict(showlabels = True,
                                   labelformat = '.0f',
                                   labelfont = dict(size = fontsize)))]

# DEFINE THE LAYOUT
layout = go.Layout(plot_bgcolor = black,
                   hovermode = 'x unified')

# DEFINE THE FIGURE
figure = go.Figure(data = data,
                   layout = layout)

figure.update_traces(hoverinfo = 'name+z')

figure.update_layout(legend = dict(itemsizing = 'constant',
                                   font = dict(size = fontsize)),
                     hoverlabel = dict(font_size = fontsize))

figure.show()
user_34377870
Related