✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🧬 Learn how to build RNA-Seq data apps with Python & Dash. Register for the May 20 Webinar!

Issue with hoverinfo text color

I’m making a bubble chart with a slider and I’m trying to customize the text when hovering over datapoint.

My problem:
- When the text is more than one line the color and thickness of the font default to a thick blue. (Shown in the following images)

text is one line, hoverinfo = ‘text’:

hoverinfo =‘text+x+y’:

The problem persists if I specify the font under hover label with the code below. While the size and font style do change the color does not. (Image of this below)
[‘hoverlabel’] = {‘font’:{‘size’: 18, ‘family’: ‘Times New Roman’, ‘color’: ‘#FFFFFF’}}

Furthermore, the problem disappears if I take the figure JSON and plot it in plotly.py. It also disappears if I export the chart to plotly chart studio from the original plot where I am having a problem.

I also checked that I am using the same version of plotly.js that plotly.py appears to be using to display the plot.

Does anyone have any ideas what would be causing the font to be augmented like this?

Code for the plot is in python, which is then converted to a JSON object and plotted by plotly.js

# make figure
figure = {
    'data': [],
    'layout': {},
}

review_range = 1.1 * dataset['num_reviews'].max()

# Plot Layout
figure['layout']['xaxis'] = {'range': [0, review_range], 'title': 'Number of Reviews', 'gridcolor': '#FFFFFF'}
figure['layout']['yaxis'] = {'range': [0, 5.9], 'title': 'Rating', 'gridcolor': '#FFFFFF', 'side': 'right'}
figure['layout']['hovermode'] = 'closest'
figure['layout']['plot_bgcolor'] = 'rgb(223, 232, 243)'
figure['layout']['margin'] = {'r': 50, 't': 0, 'l': 10}
figure['layout']['legend'] = dict(
        x=.85,
        y=0.01,
        traceorder='normal',
        bgcolor= 'rgb(223, 232, 243)',
        bordercolor='#FFFFFF',
        borderwidth=2
    )

time_snapshots = ['Current']

# make list of sources
sources = set([p['source'] for p in products])

colors = ['rgb(171, 99, 250)','rgb(230, 99, 250)','rgb(99, 110, 250)', 'rgb(25, 211, 243)']

custom_colors = {source: color for source, color in zip(sources, colors)}

# Add the data to the figure
for snap in time_snapshots:
    for source in sources:
            dataset_by_timesnap = dataset[dataset['timeSnap'] == snap]
            dataset_by_timesnap_and_source = dataset_by_timesnap[dataset_by_timesnap['source'] == source]
            
            my_text=[name for name, s, num_rev, rating in zip(list(dataset_by_timesnap_and_source["name"]),
                                                         list(dataset_by_timesnap_and_source["source"]),
                                                         list(dataset_by_timesnap_and_source["num_reviews"]),
                                                         list(dataset_by_timesnap_and_source["rating"])
                                                         )
                    ]

            # '<br>Source: ' + s +
            #        '<br>Number of Reviews: ' + str(num_rev) +
            #         '<br>Rating: ' + str(round(rating, 2)) 

            data_dict = {
                'visible': False,
                'x': list(dataset_by_timesnap_and_source['num_reviews']),
                'y': list(dataset_by_timesnap_and_source['rating']),
                'mode': 'markers',
                'text': my_text,
                'hoverinfo': "x+y+text",
                'hoverlabel':{'bgcolor':'rgb(223, 232, 243)',
                              'font':{'size': 18, 'family': 'Arial', 'color':}
                             },
                'marker': {
                    'sizemode': 'area',
                    'sizeref': .1,
                    'size': list(dataset_by_timesnap_and_source['issues']*7 + 5),

                    # Color based on datasource !!!!!!
                    #'color': custom_colors[source],

                    # Border color and size based on urgency and number of issues !!!!
                    'line' : {
                    'color': 'rgb(255, 100, 100)',
                    'width': list(dataset_by_timesnap_and_source['issues']*4)
                    }
                },
                'name': source
            }
            if snap == 'Current':
                data_dict['visible'] = True
            figure['data'].append(data_dict)


# Specify what data is visible at each step in the slider
steps = []
for snap in range(len(time_snapshots)):
    step = dict(
        method = 'restyle',  
        args = ['visible', [False] * len(sources)* len(time_snapshots)],
        label = time_snapshots[snap],
    )
    idx_source1 = snap * len(sources)
    idx_final_source = idx_source1 + len(sources)
    step['args'][1][idx_source1:idx_final_source] = [True]*len(sources) # Toggle sources for each month to "visible"
    steps.append(step)

sliders = [dict(
    active = len(time_snapshots) - 1,
    currentvalue = {'visible': False,},
    pad = {"t": 80, "b":20},
    steps = steps
)]

figure['layout']['sliders'] = sliders

#config={'showLink': False, 'include_plotyjs': False, 'output_type':'div'}
#plot_div = plot(figure, config=config)
return figure

Thanks for the report. This is probably a bug on our side.

Would you mind sending us that JSON, to help us debug?

Hi, thanks for getting back to me.

The JSON for the plot is:

figure ={‘layout’: {‘yaxis’: {‘range’: [0, 5.9], ‘gridcolor’: ‘#FFFFFF’, ‘side’: ‘right’, ‘title’: ‘Rating’}, ‘plot_bgcolor’: ‘rgb(223, 232, 243)’, ‘sliders’: [{‘active’: 0, ‘steps’: [{‘args’: [‘visible’, [True, True, True]], ‘method’: ‘restyle’, ‘label’: ‘Current’}], ‘currentvalue’: {‘visible’: False}, ‘pad’: {‘b’: 20, ‘t’: 80}}], ‘xaxis’: {‘range’: [0, 957.0000000000001], ‘gridcolor’: ‘#FFFFFF’, ‘title’: ‘Number of Reviews’}, ‘hovermode’: ‘closest’, ‘margin’: {‘r’: 50, ‘t’: 0, ‘l’: 10}, ‘legend’: {‘bordercolor’: ‘#FFFFFF’, ‘bgcolor’: ‘rgb(223, 232, 243)’, ‘traceorder’: ‘normal’, ‘borderwidth’: 2, ‘y’: 0.01, ‘x’: 0.85}}, ‘data’: [{‘visible’: True, ‘mode’: ‘markers’, ‘text’: [u’Four Sigmatic Cordyceps Mushroom Elixir, USDA Organic, Energize, Vegan, Paleo, 20 Count’, u’Four Sigmatic Chaga Mushroom Elixir, USDA Organic, wellbeing, Vegan, Paleo, 20 Count’, u’Four Sigmatic Reishi Mushroom Elixir, USDA Organic, chill and sleep, Vegan, Paleo, 20 Count’, u’Four Sigmatic Lions Mane Mushroom Elixir, USDA Organic, Focus, Vegan, Paleo, 20 Count’], ‘y’: [4.325581395348837, 4.609375, 4.196078431372549, 4.068493150684931], ‘x’: [86, 128, 102, 146], ‘hoverinfo’: ‘text+name+x+y’, ‘marker’: {‘sizemode’: ‘area’, ‘line’: {‘color’: ‘rgb(255, 100, 100)’, ‘width’: [0, 0, 0, 0]}, ‘sizeref’: 0.1, ‘size’: [5, 5, 5, 5]}, ‘name’: u’amazon’}, {‘visible’: True, ‘mode’: ‘markers’, ‘text’: [u’American Journey Peanut Butter Recipe Grain-Free Oven Baked Crunchy Biscuit Dog Treats’, u’American Journey Wild Alaskan Salmon Oil Liquid Dog & Cat Supplement’, u’American Journey Salmon & Sweet Potato Recipe Grain-Free Dry Dog Food’], ‘y’: [4.4, 4.1, 4.5], ‘x’: [870, 100, 160], ‘hoverinfo’: ‘text+name+x+y’, ‘marker’: {‘sizemode’: ‘area’, ‘line’: {‘color’: ‘rgb(255, 100, 100)’, ‘width’: [0, 0, 0]}, ‘sizeref’: 0.1, ‘size’: [5, 5, 5]}, ‘name’: u’chewy’}, {‘visible’: True, ‘mode’: ‘markers’, ‘text’: [u’70 pt. Dehumidifier, ENERGY STAR’, u’Wi-Fi Smart Thermostat’], ‘y’: [4.655948553054662, 3.9569471624266144], ‘x’: [622, 511], ‘hoverinfo’: ‘text+name+x+y’, ‘marker’: {‘sizemode’: ‘area’, ‘line’: {‘color’: ‘rgb(255, 100, 100)’, ‘width’: [0, 0]}, ‘sizeref’: 0.1, ‘size’: [5, 5]}, ‘name’: u’homedepot’}]}

I was also able to reproduce the issue with an example plot using this figure JSON:

trace1 = {
        'x': [1, 2, 3, 4],
        'y': [10, 11, 12, 13],
        'text': ['A <br> size: 40',
                 'B<br>size: 60', 
                 'C <br>size: 80', 
                 'D<br>size: 100'],
        'mode': 'markers',
        'marker': {
            'color': ['rgb(93, 164, 214)', 'rgb(255, 144, 14)',  'rgb(44, 160, 101)', 'rgb(255, 65, 54)'],
            'size': [40, 60, 80, 100]
        }
        }
data = [trace1]

layout = {
        'title': 'Bubble Chart Hover Text',
        'showlegend': False,
        'height': 600,
        'width': 600
        }

return {'data':data, 'layout':layout}

Using plotly.offline.plot in python produces this plot

However inputting the same JSON object to the javascript plot function:

Plotly.newPlot(document.getElementById(“summary_dash_plot”), figure[‘data’], figure[‘layout’]);

Produces this plot

Additionally if I tweak the ‘text’ to be one line and ‘hoverinfo’=‘text’ so the hover tag is one line of text, the blue/bold font returns to the standard font as show in the image below:

I’ve been able to identify that the font color is not actually changing. If you make the font big enough you can see that a blue outline is being placed around the text and the actual font becomes transparent. The color appears to be ‘steelblue’.

Additionally I placed the following example JS in my webpage:
https://codepen.io/plotly/pen/46742b2c62abe7267d746654fb4221c2

And here we see that the hoverinfo has the blue outline around the text when rendered in the webpage

What would be causing this behavior? Is there any way to manually override it with CSS or something. It seems like the api settings for the text are being overrode.

I was able to find the issue. Apparently, in the css file of my website there was a class .line that was overwriting the text in the tool tip and for what ever reason this only happened when the text was more than one line.