Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT!

Change label on hover in ternary plots

Hi all,

I’m not able to change the labels when hovering a ternary plot with plotly in python.

This the code that creates the plot:

import plotly
import plotly.graph_objs as go

# sample data
f1 = [31.83, 39.93, 29.15, 42.36, 432.88, 43.05, 31.32, 0.57, 424.19, 320.1, 48.16, 123.67, 176.99, 342.0, 174.84, 271.27, 115.15]
f2 = [110.8, 124.34, 132.07, 82.14, 213.04, 91.47, 133.31, 211.26, 224.33, 201.46, 59.5, 154.9, 163.59, 231.25, 123.57, 119.6, 186.35]
f3 = [59.92, 87.86, 114.43, 57.99, 364.05, 1910.65, 1196.43, 931.8, 134.58, 233.37, 80.92, 194.15, 121.22, 166.59, 142.02, 340.56, 357.92]

# trace creation
trace1 = go.Scatterternary(
a = f1,
b = f2,
c = f3,
mode='markers',
)
# plot plotting
data = [trace1]
fig = go.Figure(data=data) 
plotly.offline.plot(fig)

it works nice. But when hovering the data, on each point plotted the label with A: 0.54, B: 0.28, C: 0.17 when hovering.

I would like to replace that label with the real values (so, not percentage), like: SO4: 164, Ca: 122, Na: 158.

Adding the text option in the trace, like:

trace1 = go.Scatterternary(
a = f1,
b = f2,
c = f3,
mode='markers',
text=f1
)

I get get the value for SO4 (so for a) but I cannot add the values of b and c.

Somebody has an idea on how to do that?

Thanks in advace

@ghtmtt Define three lists of values such that those in the same position are to be displayed at each marker.

I define here three lists of random numbers in order to be able to refer to their elements in the text definition:.

import numpy as np
vals1=np.random.randint(20, 200, 17)
vals2=  np.random.randint(230, 250, 17)
vals3=np.random.randint(175, 300, 17)

Then define the text to be displayed as follows:

   text=['SO4: '+'{:d}'.format(vals1[k])+'<br>Ca: '+'{:d}'.format(vals2[k])+'<br>Na: '+'{:d}'.format(vals3[k]) 
             for k in range(17)] 

in trace1 insert the following pairs key-value:

text=text,
hoverinfo='text'

and you get what you want to display on hover.

1 Like

@empet
genius! perfectly working!

Thanks so much

BTW: I added the link of your answer also in my question in Stackexchange: https://stackoverflow.com/questions/44802477/change-label-on-hover-in-ternary-plots-plotly-python/44819495#44819495

Matteo