Import Plotly.js in Angular

Question

I followed the instructions from this SO answer to integrate plotly in the application.

Unfortunately I experience typescript errors, when trying out the standard examples of plotly.js. The argument types of Plotly.newPlot(...) seem to be not correct.

Here is my component:

import {Component, OnInit} from '@angular/core';
import * as Plotly from 'plotly.js';
import {Config, Data, Layout} from 'plotly.js';

@Component({
  selector: 'app-tabs',
  templateUrl: './tabs.component.html',
  styleUrls: ['./tabs.component.css']
})
export class TabsComponent implements OnInit {

  constructor() {
  }

  ngOnInit() {
    let y0 = [];
    let y1 = [];
    for (var i = 0; i < 50; i++) {
      y0[i] = Math.random();
      y1[i] = Math.random() + 1;
    }
    var trace1 = {
      y: y0,
      type: 'box'
    };
    let trace2 = {
      y: y1,
      type: 'box'
    };

    let data = [trace1, trace2];
    Plotly.newPlot('myDiv', data);
  }
}

I use [email protected] and angular v6.0.0

Nexeuz · Accepted Answer · 2018-05-29 23:23:51Z

4

You don't need to put Plotly in angular.json simply import like this.

import * as Plotly from 'plotly.js/dist/plotly.js';
import {Config, Data, Layout} from 'plotly.js/dist/plotly.js';

answered May 29, 2018 at 23:23

Nexeuz

4073 silver badges11 bronze badges

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

Comments

d4rty · Accepted Answer · 2018-05-13 16:01:12Z

3

I found the following workaround.

store Plotly.js in assets folder manually
import the script in angular.json: "scripts": [src/assets/scripts/plotlyjs/plotly.js"]
add declare const Plotly right under the import statements in the component where you want to use plotly

answered May 13, 2018 at 16:01

d4rty

4,2585 gold badges39 silver badges76 bronze badges

Collectives™ on Stack Overflow

Import Plotly.js in Angular

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related