Localization

[mrceperka]

Hello :wave: 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

:question: 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 :pray:

[minicstudio]

Indeed, an example would be useful.

[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

[jwmann]

Is there a way to do this without having to build your own Plot component?

[rubenp9]

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

This works in dev environment, but whe I try to do "yarn build", I get this:

Failed to compile. Failed to minify the code from this file: ./node_modules/regl-line2d/index.js:12

Read more here: http://bit.ly/2tRViJ9

Anyone knows how to solve it?

[Domino987]

Is there a way without creating a new Plot Component? I use Typescript, which does not allow me to use the recommended way. Is there a way to register it differently?

[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!

[microspace]

@angelorbasto locales is not present in https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e02af7c8715d92b148c57194da14fa3883172c00/types/plotly.js/index.d.ts#L1418 and ut gives error. Do you know how to solve this?

[angelorbastos]

@microspace so you're getting a TS "unknown property" error?

Are you using react-plotly.js's <Plot/> component? The locales property is set on plotly.js/dist/plotly.js and should be passed down to gd (the chart's graphDiv), this is why I tried this solution out (and it worked on my setup)

I don't believe I've made any changes to my codebase other than importing Plot from react-plotly.js, importing the dictionary and then setting the locales property on the <Plot/> component as I mentioned above.

[yong-polymerize]

@angelorbasto locales is not present in https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e02af7c8715d92b148c57194da14fa3883172c00/types/plotly.js/index.d.ts#L1418 and ut gives error. Do you know how to solve this?

I have the same error as you, my temporary fix is to ignore the TypeScript error by doing:

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

[HonzaKopecky]

I am using TypeScript and my solution was to create a module definition that resolves the TS error.

1. Create types folder in your project and add it to compilerOptions.typeRoots in your tsconfig.json. You might need to restart the compiler to load the new configuration;

{
    "compilerOptions": {
        ...
        "typeRoots": ["src/types", "node_modules/@types"]
    },
    ...
}

2. Create a type definition for the locale in the src/types folder. Make sure that the module name exactly matches the import path used in the next step. You can name the file whatever you like but the extension should be .d.ts (I used plotly.locale.cs.d.ts).

declare module 'plotly.js/lib/locales/cs' {
    export default any;
}

3. Import the locale in your application:

import * as csCz from 'plotly.js/lib/locales/cs';

4. Provide the locale to the Plot component:

<Plot
    config={{
        locales: {
            csCz: csCz,
        },
        locale: 'csCz',
    }}
/>