How to change localization?

[Gebuz]

Hey, is it possible to change the localization? Plotly.js descripes how to change it here: https://github.com/plotly/plotly.js/tree/master/dist#to-include-localization but from what I can see it is not possible to access the Plotly instance that I need to call .setPlotConfig on.

[David-Desmaisons]

Try to add something like locale="de-CH to your component after import the correspoding internationalized js file.

[Gebuz]

I have tried the following with no success: in my index.js: import 'assets/js/plotly-locale-da.js' Reading the last line of the file: "undefined"==typeof Plotly?(window.PlotlyLocales=window.PlotlyLocales||[], window.PlotlyLocales.push(locale)):Plotly.register(locale); it adds it to window.PlotlyLocales when it fails to find the Plotly instance. This appears to happen.

I then first tried setting the locale prop on the component without success:

<plotly
    :data="data"
    :layout="layout"
    locale="da"
    class="graph"
/>

And then by setting a config prop on the component, which again was unsuccesful:

<plotly
    :data="data"
    :layout="layout"
    :config="config"
    class="graph"
/>
...
data () {
    return {
      config: {
        locale: 'da'
      }
    }
}

[David-Desmaisons]

Try to import plotly-locale-da.js as weel as Plotly and add:

Plotly.setPlotConfig({locale: 'da'})

[Gebuz]

That does not seem to work either.

[curio77]

Any progress on this?

[curio77]

I think the issue is simply that calling Plotly.setPlotConfig() (with Plotly being an import of plotly.js) has no effect whatsoever on the plotly import made by the vue-plotly component. This:

const plotly = require('plotly.js');
Plotly.setPlotConfig({
  staticPlot: true,
  showTips: false,
});

should both make charts non-interactive and disable hint tooltips (such as the one about double-clicking to revert zoom when first zooming on a chart), but it does neither.

Would it be possible to add a config prop to vue-plotly that is passed to the Plotly.newPlot() call? I think this should work, though of course it'll apply the settings just to the individual plot instead of globally (which however probably makes more sense anyway).

[curio77]

I've created a pull request for the config prop. I've realized that one can just pass additional props that get merged into the config object created internally, but passing a user config object enables keeping this encapsulated and to potentially reuse it, as well as keeping things tidier.

This does, however, not yet resolve this actual isse as simply passing a locale attribute inside the object doesn't work; the corresponding locale data JS file still needs to be loaded, I assume, in the context of the Plotly Vue component prior to calling Plotly.newPlot().

[curio77]

So, without wanting to further spam this issue, what works is adding this right before Plotly.newPlot(…) in mounted() (of the Vue component's source):

Plotly.register(require('plotly.js/lib/locales/da'));

This in combination with either adding locale="da" to the component instantiation or passing a locale: "da" attribute in a config object made possible by my above pull request's change.

I think that on the component's side, this could be implemented by having the component look at this.$attrs.locale || this.config.locale and try to load and register the locale data as pointed out above (in a try/catch block, to be sure).

Still, this would probably leave the issue of the locale data getting thrown out by any tree-shaking happening because the module reference is non-static. One way to avoid this might consist in adding props for all supported locales (locale-da, locale-de, etc.) that explicitly load a hard-coded locale path, but this will of course unreasonably blow up the component's interface and implementation. Another way might consist in adding another prop, say, locale-data, that holds a user-provided locale data import that the Plotly Vue component then just registers prior to calling Plotly.newPlot(). What do you think?

[kulemeevag]

This solution help me. In your component need:

1. Import locale.
2. Import vue-plotly.
3. In template set locale for vue-plotly component.
4. Set additional options.

<template>
<vue-plotly
              :data="data"
              :layout="layout"
              :displayModeBar="options.displayModeBar"
              :displaylogo="options.displaylogo"
              :modeBarButtonsToRemove="options.modeBarButtonsToRemove"
              :locale="options.locale"
            />
</template>
<script>
import "plotly.js/dist/plotly-locale-ru";
import { Plotly } from "vue-plotly";
export default {
  name: "PlotlyLocale",
  components: {
    VuePlotly: Plotly
  },
 data() {
    return {
      layout: {
        width: 800,
        height: 660,
        margin: { l: 10, r: 10, b: 10, t: 90 },
        title: "Locale change test",
        mode: "lines",
        showlegend: true
      },
      options: {
        locale: "ru",
        displayModeBar: true,
        displaylogo: false,
        modeBarButtonsToRemove: [
          "sendDataToCloud",
          "select2d",
          "lasso2d",
          "autoScale2d",
          "hoverClosestCartesian",
          "toggleSpikelines",
          "hoverCompareCartesian",
          "resetCameraLastSave3d",
          "tableRotation",
          "hoverClosest3d"
        ]
      },
      data: []
    };
  }
</script>

[ncarneiro]

This solution help me. In your component need:

1. Import locale.
2. Import vue-plotly.
3. In template set locale for vue-plotly component.
4. Set additional options.

<template>
<vue-plotly
              :data="data"
              :layout="layout"
              :displayModeBar="options.displayModeBar"
              :displaylogo="options.displaylogo"
              :modeBarButtonsToRemove="options.modeBarButtonsToRemove"
              :locale="options.locale"
            />
</template>
<script>
import "plotly.js/dist/plotly-locale-ru";
import { Plotly } from "vue-plotly";
export default {
  name: "PlotlyLocale",
  components: {
    VuePlotly: Plotly
  },
 data() {
    return {
      layout: {
        width: 800,
        height: 660,
        margin: { l: 10, r: 10, b: 10, t: 90 },
        title: "Locale change test",
        mode: "lines",
        showlegend: true
      },
      options: {
        locale: "ru",
        displayModeBar: true,
        displaylogo: false,
        modeBarButtonsToRemove: [
          "sendDataToCloud",
          "select2d",
          "lasso2d",
          "autoScale2d",
          "hoverClosestCartesian",
          "toggleSpikelines",
          "hoverCompareCartesian",
          "resetCameraLastSave3d",
          "tableRotation",
          "hoverClosest3d"
        ]
      },
      data: []
    };
  }
</script>

Tried this, differences were locale import ( import "plotly.js-locales/pt-br"; ) and locale itself ( locale: "pt-BR" ), but no changes in the plot, axis number still not formatted in "pt-BR".

Locale import seems to work properly (object imported is moduleType: "locale") still missing something to make it work

[kulemeevag]

This solution help me. In your component need:

1. Import locale.
2. Import vue-plotly.
3. In template set locale for vue-plotly component.
4. Set additional options.

<template>
<vue-plotly
              :data="data"
              :layout="layout"
              :displayModeBar="options.displayModeBar"
              :displaylogo="options.displaylogo"
              :modeBarButtonsToRemove="options.modeBarButtonsToRemove"
              :locale="options.locale"
            />
</template>
<script>
import "plotly.js/dist/plotly-locale-ru";
import { Plotly } from "vue-plotly";
export default {
  name: "PlotlyLocale",
  components: {
    VuePlotly: Plotly
  },
 data() {
    return {
      layout: {
        width: 800,
        height: 660,
        margin: { l: 10, r: 10, b: 10, t: 90 },
        title: "Locale change test",
        mode: "lines",
        showlegend: true
      },
      options: {
        locale: "ru",
        displayModeBar: true,
        displaylogo: false,
        modeBarButtonsToRemove: [
          "sendDataToCloud",
          "select2d",
          "lasso2d",
          "autoScale2d",
          "hoverClosestCartesian",
          "toggleSpikelines",
          "hoverCompareCartesian",
          "resetCameraLastSave3d",
          "tableRotation",
          "hoverClosest3d"
        ]
      },
      data: []
    };
  }
</script>

Tried this, differences were locale import ( import "plotly.js-locales/pt-br"; ) and locale itself ( locale: "pt-BR" ), but no changes in the plot, axis number still not formatted in "pt-BR".

Locale import seems to work properly (object imported is moduleType: "locale") still missing something to make it work

Hi, @ncarneiro !

You need to change your import from import "plotly.js-locales/pt-br" to import "plotly.js/dist/plotly-locale-pt-br" and options.locale to "pt-BR". I changed the submitted code for your locale and it's work.

[ncarneiro]

This solution help me. In your component need:

1. Import locale.
2. Import vue-plotly.
3. In template set locale for vue-plotly component.
4. Set additional options.

<template>
<vue-plotly
              :data="data"
              :layout="layout"
              :displayModeBar="options.displayModeBar"
              :displaylogo="options.displaylogo"
              :modeBarButtonsToRemove="options.modeBarButtonsToRemove"
              :locale="options.locale"
            />
</template>
<script>
import "plotly.js/dist/plotly-locale-ru";
import { Plotly } from "vue-plotly";
export default {
  name: "PlotlyLocale",
  components: {
    VuePlotly: Plotly
  },
 data() {
    return {
      layout: {
        width: 800,
        height: 660,
        margin: { l: 10, r: 10, b: 10, t: 90 },
        title: "Locale change test",
        mode: "lines",
        showlegend: true
      },
      options: {
        locale: "ru",
        displayModeBar: true,
        displaylogo: false,
        modeBarButtonsToRemove: [
          "sendDataToCloud",
          "select2d",
          "lasso2d",
          "autoScale2d",
          "hoverClosestCartesian",
          "toggleSpikelines",
          "hoverCompareCartesian",
          "resetCameraLastSave3d",
          "tableRotation",
          "hoverClosest3d"
        ]
      },
      data: []
    };
  }
</script>

Tried this, differences were locale import ( import "plotly.js-locales/pt-br"; ) and locale itself ( locale: "pt-BR" ), but no changes in the plot, axis number still not formatted in "pt-BR". Locale import seems to work properly (object imported is moduleType: "locale") still missing something to make it work

Hi, @ncarneiro !

You need to change your import from import "plotly.js-locales/pt-br" to import "plotly.js/dist/plotly-locale-pt-br" and options.locale to "pt-BR". I changed the submitted code for your locale and it's work.

Hi @kulemeevag you're completely right. Took me some time to realize locale actually changed since month day, year isn't how it is used in pt-BR (but I've corrected these with tickformatstops and hoverformat). Thank you very much.

[kulemeevag]

This solution help me. In your component need:

1. Import locale.
2. Import vue-plotly.
3. In template set locale for vue-plotly component.
4. Set additional options.

<template>
<vue-plotly
              :data="data"
              :layout="layout"
              :displayModeBar="options.displayModeBar"
              :displaylogo="options.displaylogo"
              :modeBarButtonsToRemove="options.modeBarButtonsToRemove"
              :locale="options.locale"
            />
</template>
<script>
import "plotly.js/dist/plotly-locale-ru";
import { Plotly } from "vue-plotly";
export default {
  name: "PlotlyLocale",
  components: {
    VuePlotly: Plotly
  },
 data() {
    return {
      layout: {
        width: 800,
        height: 660,
        margin: { l: 10, r: 10, b: 10, t: 90 },
        title: "Locale change test",
        mode: "lines",
        showlegend: true
      },
      options: {
        locale: "ru",
        displayModeBar: true,
        displaylogo: false,
        modeBarButtonsToRemove: [
          "sendDataToCloud",
          "select2d",
          "lasso2d",
          "autoScale2d",
          "hoverClosestCartesian",
          "toggleSpikelines",
          "hoverCompareCartesian",
          "resetCameraLastSave3d",
          "tableRotation",
          "hoverClosest3d"
        ]
      },
      data: []
    };
  }
</script>

Tried this, differences were locale import ( import "plotly.js-locales/pt-br"; ) and locale itself ( locale: "pt-BR" ), but no changes in the plot, axis number still not formatted in "pt-BR". Locale import seems to work properly (object imported is moduleType: "locale") still missing something to make it work

Hi, @ncarneiro ! You need to change your import from import "plotly.js-locales/pt-br" to import "plotly.js/dist/plotly-locale-pt-br" and options.locale to "pt-BR". I changed the submitted code for your locale and it's work.

Hi @kulemeevag you're completely right. Took me some time to realize locale actually changed since month day, year isn't how it is used in pt-BR (but I've corrected these with tickformatstops and hoverformat). Thank you very much.

Hi, @ncarneiro! Glad to help you!