Change hover text color

I have a line chart that looks like below
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?

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


In the layout, it would looks something like this:

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


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'))

Any help on this please

@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.

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

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

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

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.

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