Change hover text color

đź“Š Plotly Python
1

I have a line chart that looks like below
Stackoe
I would like to customise the color of the texts Show6 Show3 and Show4 and keep the color of the Numbers and the Speech bubble kind of thing as it is. Basically the text color should be different from the Line color .Is this possible?

2

Yup! you can customize the backgroundcolor, text color, and border color.

ref: https://plot.ly/python/reference/#layout-hoverlabel-bgcolor

In the layout, it would looks something like this:

layout = [
    hoverlabel = dict(
        bgcolor = ['red','#00FF00','rgb(252,141,89)'] #whatever format you want
    )

]
3

Thanks for the reply, it is actually changing the text color inside the speechbuble thing, i.e the numbers. But the Show4 color remains the same as marker color, below is the code

hoverlabel = dict(font=dict(color='red'))

4

Any help on this please

5

@rasika The text associated to each hoverbox is in fact the trace name. By default, the line_color/marker_color is inherited by the trace name color to help users identify each scatter trace by color. You can change only bgcolor and font_color.

Note that hoverlabel is a property not only for go.Layout, but of go.Scatter, too.

Just print(help(go.Scatter.hoverlabel) and try to set its keys. You’ll see that the trace name color is unchanged after each new value you assigned to a hoverlabel key.

6

I dont understand it, can you please give me a sample code

7

What if I want to change the light grey background behind the text that says “show6”, “show3”, “show4”? Is this possible?

8

I figured out a solution for this - you can’t set the color of the trace name because there doesn’t seem to be a setting for that, but you can control the color of the “text” field.

so I ended up basically doing something like this:

{
  name: 'Metric name',
  type: 'bar',
  x: [1],
  y: [1],
  hoverinfo: 'text+x',
  hovertext: ['Metric name: value'],
  hoverlabel: {namelength: -1, font: {color: 'black'}},
}

e.g. I’m hiding the “name” of the plot and just including that as a string in “hovertext” which does support setting a different color

1 Like
9

I was also facing the same issue and realized that its in the official docs

Check this out. You can play around with the template to get desired effect.

10

does not answer the question about changing the trace name or background color so that its easy to read.

The question in about the separate trace name box with light grey background

11 
hovertemplate = "<b>%{y:.0f}</b> "+"<extra><b style='color:black;'>"+ customName + "</b></extra>"

Within a trace’s properties, you can customize the hovertemplate. If you use the extra tag, it will allow you to customize the field you are looking at. I haven’t figured out a way to control the text’s color without changing its style to bold yet, but I use the “b” tag which makes the text bold and set the color to black within this tag.

1 Like
12

Thank you very much! This ( Change hover text color - #11 by joekemmerling4) answers the question.
I would like to see this as a feature within the layout settings. :slight_smile: Where did you find this option?
Cheers