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?
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';
compilerOptions manually, because of the application on tree shaking provided from webpack, which is internally used in Angular 2+.
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'}
};
}
slice(). So if graph.data changed above you could simply do graph.data = graph.data.slice().
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"