Custom data in Plotly tooltip not showing

Question

I'm trying to customize a tooltip in Plotly JS to show non-default data. For that, I followed the https://plotly.com/javascript/hover-text-and-formatting/ Advanced Hovertemplate example.

However, for options in my example:

 var data = {
       x : timestamps,
       y : values,
       mode : 'lines+markers',
       type : 'scatter',
       name : 'Test',
       hovertemplate: '%{y} %{name}'
    };

y value will appear but name will still be shown as %{name} in tooltip. Additionally, in browser log the following message appears: Variable 'name' in hovertemplate could not be found!.

The only alternative I found is defined here https://community.plotly.com/t/how-to-display-variable-text-in-a-hover-template/22527 by using customdata variable, but it also has to be structured as an array in my case containing n instances of the same value. I guess this works but doesn't seem like a most prudent solution.

Answer 1

Had the same problem previously and discovered that I needed to use %{data.name} instead of just %{name}. I think I found this after reading hovertemplate's description and seeing this sentence: "The variables available in hovertemplate are the ones emitted as event data described at this link https://plotly.com/javascript/plotlyjs-events/#event-data." If you go to that link, you'll see the "data" key in the event object.