Translate dates within graphs (axis and tooltips) and display date with locale timezone

App Building
1

Hello,

Context
I'm trying to create a dashboard with several graphs having the following dataset type :

[
  {
    "newUsers": "24",
    "date": "2023-05-26T22:00:00.000Z",
  },
  {
    "newUsers": "21",
    "date": "2023-05-27T22:00:00.000Z",
  },
  {...}
]

This dashboard must be translated into French and English.

Problems
My charts are displayed as follows :

Screenshot 2023-06-27 at 15.28.32
Screenshot 2023-06-27 at 15.28.32908×430 23.6 KB

Screenshot 2023-06-27 at 15.29.43
I can't translate the dates inside my graphs axis and tooltips.
The date isn't displayed in my timezone

Expected results
Instead of "May 31" i would like to display "31 Mai"
Same for the date inside the tooltip

What I've tried
I saw that it was possible to define a global configuration for plotly and define a locale this way: Plotly.setPlotConfig({locale: 'fr-FR'})
But I can't access Plotly's global instance and it's not possible to do this from a chart's retool parameters
So how can I do it?

Also, I know I can change the display format of an axis with the tick format field, but if I put "%x" for example, I get the following display 06/31/2023, whereas the French format is 31/06/2023.

If anyone has ever had to deal with a similar configuration, I'd love to hear your feedback.

2

Hey @iManFR!

It doesn't look like there is built-in support for this with Retool's chart component but you can create a custom component using the PlotlyJS library. You can then pass data to it using the Retool.subscribe function. Plotly has it's own reference for how to change locales here as well!

I've included an example you can import and play around with, let me know if that helps!
plotly-20localization.json

1 Like