Change the Backgroundcolor of the Tracename in Hovertemplate

📊 Plotly Python
1

Hello, how can I change the background color where the tracename is displayed in the hovertemplate in ploty?

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 =
    '<i>Price</i>: $%{y:.2f}'+
    '<br><b>X</b>: %{x}<br>'+
    '<b>%{text}</b>',
    text = ['Custom text {}'.format(i + 1) for i in range(5)],
    showlegend = False))


fig.show()

Best Regards

2

Hey @cosco, you are searching for the hoverlabelparameter.

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 =
        '<i>Price</i>: $%{y:.2f}'+
        '<br><b>X</b>: %{x}<br>'+
        '<b>%{text}</b>',
        text = ['Custom text {}'.format(i + 1) for i in range(5)],
        hoverlabel=dict(bgcolor="red"),
        showlegend = False),
               )


fig.show()
3

Hey @AIMPED , thank you. I am not searching for the hoverlabel parameter. I want to change the color where the tracename is displayed the box next to it.

4

Hey @cosco sorry for the misunderstanding. I actually don’t know how to change this.

There is an other topic from a while back, without answer…so I would assume, you can’t change it.

5

Hi @cosco ,

Maybe you wanna try using Dash, you can override css and change the color of second hover box.

This code will change the second hover box to black by overidding CSS.

Save as custom.css put in folder assets

.plotly .hoverlayer .hovertext rect {
  fill-opacity: 1 !important;
  fill: black !important;
}

By modifying a few part from example that given by @AIMPED into Dash.

from dash import Dash, dcc
import plotly.graph_objects as go

app = Dash(__name__)
fig = go.Figure(
    go.Scatter(
        x = [1,2,3,4,5],
        y = [2.02825,1.63728,6.83839,4.8485,4.73463],
        hovertemplate =
        '<i>Price</i>: $%{y:.2f}'+
        '<br><b>X</b>: %{x}<br>'+
        '<b>%{text}</b>',
        text = ['Custom text {}'.format(i + 1) for i in range(5)],
        showlegend = False),
               )

# fig.show()
app.layout = dcc.Graph( figure=fig)

app.run_server()

image
image1233×604 18 KB

Hope this help.

1 Like
6

Thank you farispriadi for the solution!

2 Likes