Line chart tick text not displaying dynamic values

App Building
1

Hi

I'm trying to apply string tick labels to my chart as per this:

When I try this in my retool chart, it only works if I use a static value for tickvals and ticktext whereas I want to use values from a variable and a graphql response which I resolve through the {{}} syntax.

Here's the plotly layout snippet:

{
  "font": {
    "family": "var(--default-font, var(--sans-serif))",
    "color": "#979797"
  },
  "margin": {
    "l": 16,
    "r": 24,
    "t": 24,
    "b": 32,
    "pad": 2
  },
  "hovermode": "closest",
  "hoverlabel": {
    "bgcolor": "#000",
    "bordercolor": "#000",
    "font": {
      "color": "#fff",
      "family": "var(--default-font, var(--sans-serif))",
      "size": 12
    }
  },
  "clickmode": "select+event",
  "dragmode": "select",
  "xaxis": {
    "automargin": true,
    "fixedrange": true,
    "gridcolor": "#fff",
    "zerolinecolor": "#fff",
    tickmode: "array",
    tickvals: {{variableSelectedTeamFixtureSequence}},
    ticktext: {{formatDataAsObject(getTeamPerformanceHistory.data.teamPerformanceHistory.fixturePerformances)['opponentTeamName']}}
  },
  "yaxis": {
    "automargin": true,
    "zerolinecolor": "#DEDEDE"
  }
}```

variableSelectedTeamFixtureSequence has the value of [1, 2].

The corresponding two text labels are not rendering.  Instead I see this:

![Screenshot 2023-10-31 at 07.39.43|690x150](upload://oSitpgrNcCxvMkB9v5fvCTKAIJQ.png)

Is tick formatting supported in retool currently?

Thanks

Ben
2

Should be possible, I think I've done something in the past like this.

Just a quick observation should it be {{variableSelectedTeamFixtureSequence.value}} not just {{variableSelectedTeamFixtureSequence}} ?

1 Like
3

That's it! Thankyou!

1 Like