Hovertemplate questions for charts V2

App Building
1
  • Goal:
    Recreate behavior from old chart showing custom data in hovertemplate. Also, if anyone knows how to use the old x unified hovertemplate please let me know.
  • Steps:
    I have tried adding it as an extra data series which didnt seem to work. I also tried accessing the underlying data from the tooltip in the series.
  • Details:
    in the old plotly charts I used this
 "x": {{get_sales_and_ad_by_day.data.week_number}},
 "y": {{get_sales_and_ad_by_day.data.sales}},
 "customdata": {{get_sales_and_ad_by_day.data.first_day_of_week}},  // Assuming this contains the first day of each week
 "type": "line",
 "hovertemplate":"<b>{{currency_symbol.value}}%{y:,.2f}</b><br> Week of %{customdata|%Y-%m-%d}<extra></extra>",
1 Like
2

Hey @James_Tuxbury! Thanks for reaching out.

Unless I'm misunderstanding, you should be able to replicate this functionality by customizing the Tooltip for each data series:

image
image1202×846 47.1 KB

The trick to accessing and interpolating in the underlying data is to use JS template literals! Everything else, including the output from queries, can be access using the typical double curly braces.

I hope that helps! Let me know if you have any additional questions.

3

Thank you for your reply @Darren . In my particular case I am trying to add the first day of the week for each week in my chart. I attempted the code below which I think is what you were suggesting

<b>%{x}</b><br>%{fullData.name}: %{y}<br> {{ get_advertising_performance_graph.data.first_day_of_week[0] }} <extra></extra>

but this just causes the first day of the first week to show on every single week.

Please let me know if I am misinterpreting something.

4

Ah okay I think I see what's happening. I assume first_day_of_week is an array and you don't have a way of dynamically referencing the correct index. The result is that the tooltip for every data point just references the 0 index. Does that sound right?

I think the solution is to toggle on the "Use array" option. Doing so allows you to map the contents of first_day_of_week to an array of tooltip content. The below is a super simple implementation:

image
image1250×564 43.4 KB

Let me know if something similar works for you!

5

Thanks for you reply @Darren I got this working to some extent, but the data is not the correct one for the data point. With this setup, however, I couldn't figure out how to access the x and y values.

image

6

This solution does assume that the data in first_day_of_week directly correlates to the series data. If the two aren't the same size or in the same order, then you'd end up with labels applied to the incorrect data points. I also verified that you can't reference the x and y values in the same way when using the array option, which definitely complicates things.

Given these limitations, I think your best option is to construct the hoverTemplate array in an external query and then reference it from within the table settings. That would eliminate any issues with data access and really put you in full control! Let me know if you have any questions about implementing that.