Localization

Hello 👋 I am having trouble with localization. I have looked at plotly.js tests for some inspiration and I’ve seen that config.locale and config.locales are being set here and passed to newPlot fn. But it didn’t really help me.

My Chart components looks like this:

import * as Plotly from 'plotly.js'
import * as csDictionary from 'plotly.js/lib/locales/cs.js'
import * as React from 'react'
import * as Plot from 'react-plotly.js'

Plotly.register(csDictionary)
Plotly.setPlotConfig({ locale: 'cs' })

const trace1 = {
  x: [0, 1, 2],
  y: [1, 1, 1],
  mode: 'lines+markers+text',
  name: 'Lines, Markers and Text',
  text: ['Text A', 'Text B', 'Text C'],
  textposition: 'top right',
  textfont: {
    family: 'sans serif',
    size: 18,
    color: '#1f77b4',
  },
  type: 'scatter',
}

class Chart extends React.Component {
  render() {
    return (
      <Plot
        config={{ locale: 'cs' }}
        data={[trace1]}
        layout={{
          width: 800,
          height: 400,
          title: 'A Fancy Plot',
        }}
      />
    )
  }
}
export default Chart

❓ Any ideas how to make this work?

Localization is crucial for me and it looks that it is somehow supported, but I just cannot figure how to set it up.

Thanks 🙏

[angelorbastos]

For anyone still having this issue: after hours of struggling with this, having @conradoqg’s solution not work for me because of Webpack, I found an easy workaround.

At your top-level imports, do:

import * as localeDictionary from 'plotly.js/lib/locales/pt-br.js'

Notice you can import whatever Plotly-provided locale on the line above, and probably even create your own (following Plotly’s pre-defined dictionary structure for locales).

Then, inside your component definition, do:

<Plot 
  config = {{
    locales: { 'pt-BR': localeDictionary }, // This makes the locale available to your plot
    locale: 'pt-BR' // This uses the locale on the plot
  }}
  ...
/>

Hope this helps, cheers!

[conradoqg]

Got it:

import * as Plotly from 'plotly.js';
import * as csDictionary from 'plotly.js/lib/locales/pt-br.js';
import createPlotlyComponent from 'react-plotly.js/factory';
const Plot = createPlotlyComponent(Plotly);
Plotly.register(csDictionary);

Cheers