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?

Answer 1

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'}
    };
}

Answer 2

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';