How to fix `TypeError: this is undefined` when using plotly.js in angular 8?

Question

I am unable to use plotly.js in my angular 8 app. I am quite new to angular and front end development in general. I followed the instructions found here https://github.com/plotly/angular-plotly.js/blob/master/README.md Using angular CLI

$ ng new my-project
$ cd my-project
$ npm install angular-plotly.js plotly.js --save

Added the PlotlyModule into app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

PlotlyModule.plotlyjs = PlotlyJS;

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

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

then did ng generate component plotly-example

Added the following code to plotly-example.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-plotly-example',
    template: '<plotly-plot [data]="graph.data" [layout]="graph.layout"></plotly-plot>',
})
export class PlotlyExampleComponent {
    public graph = {
        data: [
            { x: [1, 2, 3], y: [2, 6, 3], type: 'scatter', mode: 'lines+points', marker: {color: 'red'} },
            { x: [1, 2, 3], y: [2, 5, 3], type: 'bar' },
        ],
        layout: {width: 320, height: 240, title: 'A Fancy Plot'}
    };
}

After I run ng serve and open http://localhost:4200/, I get a blank page. Upon doing Inspect element and going to console I see

TypeError: this is undefined[Learn More]
plotly.js:24902
./node_modules/plotly.js/dist/plotly.js/</<[164]</<
plotly.js:24902
./node_modules/plotly.js/dist/plotly.js/</<[164]<
plotly.js:24895
o
plotly.js:7:622
o/<
plotly.js:7:674
./node_modules/plotly.js/dist/plotly.js/</<[719]<
plotly.js:106941
o
plotly.js:7:622
o/<
plotly.js:7:674
./node_modules/plotly.js/dist/plotly.js/</<[1]<
plotly.js:10
o
plotly.js:7:622
o/<
plotly.js:7:674
./node_modules/plotly.js/dist/plotly.js/</<[697]<
plotly.js:104010
o
plotly.js:7:622
o/<
plotly.js:7:674
./node_modules/plotly.js/dist/plotly.js/</<[14]<
plotly.js:242
o
plotly.js:7:622
o/<
plotly.js:7:674
./node_modules/plotly.js/dist/plotly.js/</<[25]<
plotly.js:385
o
plotly.js:7:622
r
plotly.js:7:792
./node_modules/plotly.js/dist/plotly.js/<
plotly.js:7:359
./node_modules/plotly.js/dist/plotly.js/<
plotly.js:7:72
./node_modules/plotly.js/dist/plotly.js
plotly.js:7
__webpack_require__
bootstrap:79
./src/app/app.module.ts
http://localhost:4200/main.js:388:82
__webpack_require__
bootstrap:79
./src/main.ts
http://localhost:4200/main.js:503:73
__webpack_require__
bootstrap:79
[0]
http://localhost:4200/main.js:527:18
__webpack_require__
bootstrap:79
checkDeferredModules
bootstrap:45
webpackJsonpCallback
bootstrap:32
<anonymous>
http://localhost:4200/main.js:1:2
InnerModuleEvaluation self-hosted:4097:5 evaluation self-hosted:4043:9

Avinash Dalvi · Accepted Answer · 2019-12-18 22:25:33Z

2

I had the same error but once I changed to PlotlyViaCDNModule it worked.

So on the app.module.ts

    import { PlotlyViaCDNModule  } from 'angular-plotly.js';
    PlotlyViaCDNModule.plotlyVersion = 'latest'; 
    PlotlyViaCDNModule.plotlyBundle = null;

@NgModule({
  imports: [
    PlotlyViaCDNModule,
    ...
  ],

edited Dec 18, 2019 at 22:25

Avinash Dalvi

9,4299 gold badges34 silver badges60 bronze badges

answered Dec 18, 2019 at 17:21

Gabriel Nava Rodrigues

212 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gary Over a year ago

This worked for me: import { PlotlyViaCDNModule } from 'angular-plotly.js'; PlotlyViaCDNModule.setPlotlyVersion('latest');

jornathan · Accepted Answer · 2019-10-11 04:07:14Z

0

I found comment for this issue from here, Cannot read property 'document' of undefined #75

As a quick solution, changing in the tsconfig.json the compilerOptions.target property to "es5" might solve the issue. Or using PlotlyViaCDNModule or PlotlyViaWindowModule to avoid the angular transpiler to minify the plotly.js code.

So you need to change it.
"target": "es2015" to "target": "es5",

Don't forget add selector to your app.component.html as below,

 <div>
   <app-plotly-example></app-plotly-example>
 </div>

edited Oct 11, 2019 at 4:07

answered Oct 11, 2019 at 3:59

jornathan

8848 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to fix `TypeError: this is undefined` when using plotly.js in angular 8?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related