Repository files navigation

Aplotly.js Angular component fromPlotly.

• Installation
• Quick start
• API
  • Basic props
  • Event handler props
• Development

$ npm install angular-plotly.js plotly.js

Using theangular CLI to start a new project

$ ng new my-project$cd my-project$ npm install angular-plotly.js plotly.js --save

Add thePlotlyModule into the main app module of your project

import{NgModule}from'@angular/core';import{CommonModule}from'@angular/common';import{PlotlyModule}from'angular-plotly.js';@NgModule({imports:[CommonModule,PlotlyModule],    ...})exportclassAppModule{}

Then use the<plotly-plot> component to display the graph

import{Component}from'@angular/core';@Component({selector:'plotly-example',template:'<plotly-plot [data]="graph.data" [layout]="graph.layout"></plotly-plot>',})exportclassPlotlyExampleComponent{publicgraph={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'}};}

You should see a plot like this:

For a full description of Plotly chart types and attributes see the following resources:

• Plotly JavaScript API documentation
• Full plotly.js attribute listing

Warning: for the time being, this component maymutate itslayout anddata props in response to user input, going against React rules. This behaviour will change in the near future onceplotly/plotly.js#2389 is completed.

Note: To make a plot responsive, i.e. to fill its containing element and resize when the window is resized, usestyle orclassName to set the dimensions of the element (i.e. usingwidth: 100%; height: 100% or some similar values) and setuseResizeHandler totrue while settinglayout.autosize totrue and leavinglayout.height andlayout.width undefined. This will implement the behaviour documented here:https://plot.ly/javascript/responsive-fluid-layout/

Event handlers for specificplotly.js events may be attached through the following props:

To get started:

$ npm install

To see the demo app, run:

$ npm start

To run the tests:

$ npm runtest

© 2018 Plotly, Inc. MIT License.