Angular 4 with Plotly

Question

I am trying to build an angular 4 application that needs graph.

I am planning to use plotly, but I am not getting any clear site showing the steps or the way to include plotly.js file in angular 4 application.

Can somebody please give me some insight on this?

Seems to be an issue listed here: https://github.com/plotly/plotly.js/issues/955 with a work around solution posted here: https://damienbod.com/2016/04/21/creating-an-angular-2-component-for-plotly/ — peinearydevelopment, Jan 19 '18 at 19:05
https://stackoverflow.com/questions/45352071/plotly-in-angular-4-not-finding-html-element-with-ngif. I can see someone posting some question here. Is there a way we can contact this person ? — test, Jan 19 '18 at 19:41

score 17 · Accepted Answer · edited Apr 13 '18 at 06:28

17

This is what I do, first is to install plotly.js using NPM(or any package manager that you use):

npm install plotly.js --save
npm install @types/plotly.js --save

Note: you may consider installing @types in dev section (--save-dev)

Then I edited src/tsconfig.app.json to include this, under compilerOptions:

    "types": [
      "plotly.js"
    ],"paths": {
      "plotly.js": [
        "../node_modules/plotly.js/dist/plotly-basic.js"
      ]
    }

Then you can use Plotly.js in any of your component by importing like this:

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

edited Apr 13 '18 at 06:28

Arnaud P

12,022
7
56
67

answered Jan 21 '18 at 14:01

Afeez Aziz

1,337
2
12
26

1

It seems that it is not needed to include plotly js file into `compilerOptions` manually, because of the application on tree shaking provided from webpack, which is internally used in Angular 2+. – 千木郷 Apr 29 '18 at 14:52
If your are having issues after upgrading to Angular 6 read this (https://stackoverflow.com/questions/50213078/setting-up-plotly-js-in-angular-6-0-0-issues) – Nizam Jun 19 '18 at 06:51

score 10 · Answer 2 · answered Jul 23 '18 at 10:05

10

There is now an official Angular wrapper for plot.ly

npm install angular-plotly.js plotly.js

Add plotly to your main app module:

import { PlotlyModule } from 'angular-plotly.js';

@NgModule({
    imports: [CommonModule, PlotlyModule],
    ...
})
export class AppModule { }

Can then add the graph to a component like this:

@Component({
    selector: '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'}
    };
}

answered Jul 23 '18 at 10:05

Koslun

2,164
1
23
17

@carkod Imagine you have already solved this but looking at the public API I would assume you should expect to change the entire array reference. Meaning even if you "just" change an element in the array you need to clone the array. You can do this easily with `slice()`. So if `graph.data` changed above you could simply do `graph.data = graph.data.slice()`. – Koslun Nov 16 '18 at 20:08
1

Note that cloning the array can also be done with `graph.data = Array.from(graph.data)`. While it's really a stylistic thing I find it more clearly conveys "I want a copy of this array" – kcazllerraf Nov 16 '18 at 22:02
@Koslun it's an official ? – Hoang NK Mar 12 '19 at 13:37
@hoangk yes, it's an official library from plot.ly. Meaning it's supported by plot.ly themselves rather than one or more community members. – Koslun Mar 21 '19 at 12:48

Angular 4 with Plotly

2 Answers2

Linked