Locale

[shad0wgen]

I'm trying to change the locale with the following:
plotly.component.ts:
public config = { locale: 'sv' };
plotly.component.html:
<plotly-plot [config]="config"></plotly-plot>
But nothing changes.
Locales for plotly are located in "node_modules/plotly.js/lib/locales/sv.js"
angular-plotly version 0.1.15
Am I missing something?

[FlacosFlace]

I'am dealing with the same problem. Did you find the solution?

[FlacosFlace]

If you need just 'sv' locale you can do following:

import * as SVLocale from 'plotly.js/lib/locales/sv.js';

@component({
providers: [PlotlyService]
})

constructor(private plotlyService: PlotlyService) {
this.plotlyService.getPlotly().register(SVLocale);
}

This should work. But only for one locale. If you want to use different locales you must do it by dynamic import.

[dan-schneider]

Unfortunately I am not able to use another locale. How do I set it correctly. Until now I do not have a Plotly Service like @FlacosFlace mentioned. If I just copy this lines into my code, it does not work, too.

[andrefarzat]

@dan-schneider this is new to me. To change the locale we follow this: https://github.com/plotly/plotly.js/tree/master/dist#to-include-localization ?

[dan-schneider]

So what are the exact steps to use another locale? Are there any additional instructions that are not described in this thread?

[andrefarzat]

@dan-schneider angular-plotly.js is an angular wrapper for plotly.js. If you don't have the PlotlyService, it might be because you're using plotly.js directly in your angular code ?

Well, le me recap the code here:

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import * as PlotlyJS from 'plotly.js/dist/plotly.js';
import { PlotlyModule } from 'angular-plotly.js';

PlotlyModule.plotlyjs = PlotlyJS;


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    PlotlyModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// app.component.ts
import { Component } from '@angular/core';
import { PlotlyService } from 'angular-plotly.js';
import * as SVLocale from 'plotly.js/lib/locales/sv.js';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  providers: [PlotlyService]
})
export class AppComponent {
  constructor(private plotlyService: PlotlyService) {
    this.plotlyService.getPlotly().register(SVLocale);
  }
}

[nasreddineskandrani]

Hi,
just an update for futur visitors :)

I made it work using:
https://www.npmjs.com/package/plotly.js-locales?activeTab=readme
instead of import * as SVLocale from 'plotly.js/lib/locales/sv.js';
In the last answer.

[mvanveen82]

I'm running into an issue trying to load the Dutch locales.

I've included plotly over CDN and installed plotly.js-locales as suggested by @nasreddineskandrani. As import * as SVLocale from 'plotly.js/lib/locales/sv.js'; is not possible because of loading plotly from the CDN.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PlotlyViaCDNModule, PlotlyService } from 'angular-plotly.js';
import locale from 'plotly.js-locales/nl';

PlotlyViaCDNModule.setPlotlyVersion('1.58.4');

@NgModule({
  imports: [CommonModule, PlotlyViaCDNModule],
  providers: [PlotlyService]
})
export class FrontendUiModule {

  constructor(private plotlyService: PlotlyService) {
    this.plotlyService.getPlotly().register();
  }
}

When running this I get the error TypeError: this.plotlyService.getPlotly(...).register is not a function
Trying this:

const plotly = this.plotlyService.getPlotly(); 
console.log(plotly);

shows in 'waiting' in the console. I've tried using async await, but the call does not return a promise. But it does seem the PlotlyService is not able to provide the Plotly instance when loading the module.
Trying the registering in a component higher up in the tree, also does not fix the problem.

[andrefarzat]

@mvanveen82 you're problably using the library too soon, before it's been loaded. That's an issue that we will address ( #159 ).

The issue is here: https://github.com/plotly/angular-plotly.js/blob/master/projects/plotly/src/lib/plotly.service.ts#L80
While it's loading, be plotly property is the waiting string.

I believe a simple solution would be having something similar to jQuery.ready to trigger a callback once the lib is loaded. What do you think?

[mvanveen82]

Or make the .getPlotly() method a Promise | Observable so you can wait for it to have loaded.

[andrefarzat]

@mvanveen82 just released the version 4.0.0 with the .getPlotly returning a Promise. Check it out 😸

[mvanveen82]

@andrefarzat works like a charm. Thanks a lot!!

For reference, this is what my module now looks like:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PlotlyViaCDNModule, PlotlyService } from 'angular-plotly.js';
import locale from 'plotly.js-locales/nl';

PlotlyViaCDNModule.setPlotlyVersion('1.58.4');

@NgModule({
  imports: [CommonModule, PlotlyViaCDNModule],
})
export class FrontendUiModule {
  constructor(private plotlyService: PlotlyService) {
    this._setupPlotlyWithDutchLocale();
  }

  private async _setupPlotlyWithDutchLocale() {
    const plotly = await this.plotlyService.getPlotly();
    plotly.register(locale);
  }
}