Hovertemplate with customdata

The documentation on the hovertemplate is somewhat confusing.
Is there an easy way to provide it (hovertemplate) with arrays of the same length as the traces length?

I was able to add one such array with:

data.push({
... 
customdata: traces[trace].counter.map(num => (num * 100).toFixed(1) + "%")
hovertemplate: "<b>%{customdata}</b>
})

But how would I go about providing it 2, 3, 4 or more additional arrays?

customdata.dataset1, customdata.dataset2 etc. don’t do it.

Thanks!

@Bishonen

I created this tutorial https://plot.ly/~empet/15366 on customdata and hovertemplate for Python users.

The basic idea is that when your customdata contains more than a 1d-array i.e it is an array of
len(trace data) rows and m>1 columns , then each column k can be passed to hovertemplate in the form
‘%{customdata[k]}’ . Hope that it is not difficult to translate these rules for plotly.js.

6 Likes

Thanks a lot! This indeed clarifies the whole thing :slight_smile: Your example should be given in the docs (IMO), to help out with understanding of this property.

Any idea if one can access a double nested array, too? customdata[0][0], customdata[0][1] etc. seems to always return the first entry [0][0].

E.g. regardless how I put it, customdata always returns [2][0]

You cannot access particular values from a 1d or 2d array, only columns, while for a heatmap or surface the whole 2d array.

Thanks again for all your time! Do I understand correctly then, that there’s no way to show the 4 sub-arrays from the pic above on hover for the four subplots shown on the pic below? E.g. customdata[1][1] should populate the onhover for the second bar in the second column - whatever I tried, I always get the ‘197,087’ instead of ‘14,701’

Each trace in each subplot cell must have defined its own customdata. I do not uhderstand what custom[i][j]
Is in plotly.js for a 2d array, i.e e an array of m rows and n colums. Only columns can be passed to hovertemplate. No other type of subarray.

1 Like

Awesome - your reply was enough to bring me on the right path. I was providing the same, multi-level customdata to all traces and tried to do the correct assignement in the hovertemplate. Instead, I created 4x customdata and assigned each subplot individually and all works beautifully.

Thanks a lot again!

Really easy way if you have pandas. Just choose the columns of interest in a dataframe, convert them to numpy arrays, and form a list of those arrays. This will structure the data perfectly for your ‘customdata’ attribute. Here’s a visual:

Thank you! That was very helpful, I was actually struggling a bit with custom data but your tutorial unstuck me.