Pie chart tooltips not working

Hi all!

I'm trying to amend the tooltip of a Pie chart component, but it doesn't seem to be having any effect. I've tried with a Line Chart and it seems to work as expected, so it's just pie charts.

Here's a screenshot where I've amended the tooltip to 'This is a test' but it's still showing as the default template:

Thanks in advance!

Hi @joelenfield, welcome to the forum! :wave:
Great question! Under the hood, Retool is setting Plotly's "hovertemplate" property to something like:
"hovertemplate": "<b>%{x}</b><br>%{fullData.name}: %{y}<extra></extra>"

Here is the break down of how Plotly takes that syntax:

  1. %{x}: This placeholder will be replaced with the x-value of the data point.
  2. <b>%{x}</b><br>: This part creates a bolded label for the x-value and adds a line break (<br>).
  3. %{fullData.name}: This placeholder is specific to Plotly, and it represents the name of the trace (line or bar) associated with the data point. %{fullData.name} will be replaced with the name of the trace.
  4. %{y}: This part represents the y-value of the data point.
  5. <extra></extra>: This is an empty container for any additional information you might want to include in the hover label.

However, the syntax for a pie chart is different. Here is how the value for the "hovertemplate" property should look like for a pie chart:

"hovertemplate": "<b>%{label}</b><br>Value: %{value}<extra></extra>"

Where:

  1. %{label} is a placeholder for the label of the corresponding pie slice.
  2. %{value} is a placeholder for the value associated with that slice.

Therefore, we need to change this manually. Instead of setting the "Content" using "UI Form", select "Plotly JSON" and add the latter value for the"hovertemplate" property:

This should let us set that tooltip manually for a pie chart using JSON. :hammer_and_pick:

Let us know if you have any questions! :slightly_smiling_face: