How do I get my plotly.js chart to translate dates to the local region's language?

plotly.js
1

Hello,

We are developing an AngularJS application using Plotly.js charts. The x axis on one of our charts displays dates:

time series chart
time series chart775×489 80.1 KB

These dates are passed to the chart in this format: 2022-11-01T06:01:00.000Z.

One rule we have for our application is that all text needs to be translatable to other languages. So I’m wondering if Plotly.js has a property on the chart layout or data that tells it what language to translate dates to. Or to detect the region and translate the dates accordingly.

For example, here in North America, a date might be displayed as ‘Jan 2023’. But if I were in Russia, I would like to see ‘январь 2023’ (or whatever the shorthand is, if they use shorthand).

Note that I’m not asking for regional formatting. I could format the date with new Date(date).toLocaleDateString('ru-RU') to get 01.11.2023, but that’s not what I’m asking. I’m asking for the translation of month names and week day names.

Thanks!

1 Like
2

I know this topic is almost a year old now, but I was searching for the same thing and finding the (easy) solution was not as simple as it should have been. Thus, I’m answering here to help others with the same problem.

Localizing Plotly.JS is documented on github. Basically it’s just this a matter of including the locale-file and telling plotly to use it:

// include your locale file
<script src="plotly-locale-de-ch.js"></script>

// tell Plotly to use this locale
<script>Plotly.setPlotConfig({locale: 'de-CH'})</script>

hth,
Martin