Adding customdata to hovertemplate containing a json for each data point

plotly.js
1

I’m trying to do something very similar to what’s talked about in this github issue and linked in the following comment - Not possible to use several customdata values per data points in go.Pie · Issue #4591 · plotly/plotly.js · GitHub

The difference is just, rather than storing an array in customdata to get that associated with each data point, I want to know if it’s possible to store a json/javascript object as each row of the customdata variable, rather than a 1 d array like what’s included here.

I want to get this to work with customdata looking like the following:

customdata": [
        { 
          foo: "a",
          bar: "A"
        },{ 
          foo: "b",
          bar: "B"
        },{ 
          foo: "c",
          bar: "C"
        },{ 
          foo: "d",
          bar: "D"
        }
          
        ],

But if I change customdata to the above, I can’t figure out how to access the customdata object at a specified field despite how many edits I keep trying.

 "hovertemplate": "foo:%{customdata[0]['foo']} <br> bar:%{customdata[0]['bar']}", // shows "customdata[0]['foo']" as  a string in tooltip, doesn't evaluate expression
2

@bbiney1

Your adopted solution to display customdata is not the right one, because customdata[0] is interpreted by plotly.js as the given customdata, and customdata["foo"] has no sense (plotly.py displays the error: invalid syntax).

To get a working customdata, define from your list of dicts, the following array:

newcustomdata= [['a', 'A'],
                ['b', 'B'],
                ['c', 'C'],
                ['d', 'D']]

and set in the trace definition:

customdata=newcustomdata,
hovertemplate ="foo: %{customdata[0]}<br>bar: %{customdata[1]}"