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
