Angular 4 Flat

Question

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

I plan to use plotly, but I don't get any clear site showing the steps or how to include the plotly.js file in angular 4 app.

Can someone please give me some idea about this?

Answer 1

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

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

Note. you might consider installing @types in the dev section (--save-dev)

Then I edited src/tsconfig.app.jsonto 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 components by importing like this:

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

Answer 2

plot.ly

npm install angular-plotly.js plotly.js

:

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

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

:

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