Black Lives Matter. Please consider donating to Black Girls Code today.

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:

customdata: traces[trace] => (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.



I created this tutorial 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.

1 Like

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!