Supports Angular 9.x and up. If you want to use with Angular 8.x, please use version angular-plotly.js@1.x.
Using the angular CLI to start a new project
$ ng new my-project
$ cd my-project
$ npm install angular-plotly.js plotly.js-dist-min --save
$ npm install @types/plotly.js-dist-min --save-devAdd the PlotlyModule into the main app module of your project
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import * as PlotlyJS from 'plotly.js-dist-min';
import { PlotlyModule } from 'angular-plotly.js';
PlotlyModule.plotlyjs = PlotlyJS;
@NgModule({
imports: [CommonModule, PlotlyModule],
...
})
export class AppModule { }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>',
})
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'}
};
}You should see a plot like this:
For a full description of Plotly chart types and attributes see the following resources:
| Prop | Type | Default | Description |
|---|---|---|---|
[data] |
Array |
[] |
list of trace objects (see https://plot.ly/javascript/reference/) |
[layout] |
Object |
undefined |
layout object (see https://plot.ly/javascript/reference/#layout) |
[frames] |
Array |
undefined |
list of frame objects (see https://plot.ly/javascript/reference/) |
[config] |
Object |
undefined |
config object (see https://plot.ly/javascript/configuration-options/) |
[revision] |
Number |
undefined |
When provided, causes the plot to update when the revision is incremented. |
[updateOnLayoutChange] |
Boolean |
true |
Flag which determines if this component should watch to changes on layout property and update the graph. |
[updateOnDataChange] |
Boolean |
true |
Flag which determines if this component should watch to changes on data property and update the graph. |
[updateOnlyWithRevision] |
Boolean |
false |
If true, this component will update only when the property revision is increased. |
(initialized) |
Function(figure, graphDiv) |
undefined |
Callback executed after plot is initialized. See below for parameter information. |
(update) |
Function(figure, graphDiv) |
undefined |
Callback executed when when a plot is updated due to new data or layout, or when user interacts with a plot. See below for parameter information. |
(purge) |
Function(figure, graphDiv) |
undefined |
Callback executed when component unmounts, before Plotly.purge strips the graphDiv of all private attributes. See below for parameter information. |
(error) |
Function(err) |
undefined |
Callback executed when a plotly.js API method rejects |
[divId] |
string |
undefined |
id assigned to the <div> into which the plot is rendered. |
[className] |
string |
undefined |
applied to the <div> into which the plot is rendered |
[style] |
Object |
{position: 'relative', display: 'inline-block'} |
used to style the <div> into which the plot is rendered |
[debug] |
Boolean |
false |
Assign the graph div to window.gd for debugging |
[useResizeHandler] |
Boolean |
false |
When true, adds a call to Plotly.Plot.resize() as a window.resize event handler |
Note: To make a plot responsive, i.e. to fill its containing element and resize when the window is resized, use style or className to set the dimensions of the element (i.e. using width: 100%; height: 100% or some similar values) and set useResizeHandler to true while setting layout.autosize to true and leaving layout.height and layout.width undefined. This will implement the behaviour documented here: https://plot.ly/javascript/responsive-fluid-layout/
@Component({
selector: 'plotly-example',
template: `
<plotly-plot [data]="graph.data" [layout]="graph.layout"
[useResizeHandler]="true" [style]="{position: 'relative', width: '100%', height: '100%'}">
</plotly-plot>`,
})
export class PlotlyExampleComponent {
public graph = {
data: [{ x: [1, 2, 3], y: [2, 5, 3], type: 'bar' }],
layout: {autosize: true, title: 'A Fancy Plot'},
};
}Event handlers for specific plotly.js events may be attached through the following props:
| Prop | Type | Plotly Event | Obs |
|---|---|---|---|
(afterExport) |
Function |
plotly_afterexport |
|
(afterPlot) |
Function |
plotly_afterplot |
|
(animated) |
Function |
plotly_animated |
|
(animatingFrame) |
Function |
plotly_animatingframe |
|
(animationInterrupted) |
Function |
plotly_animationinterrupted |
|
(autoSize) |
Function |
plotly_autosize |
|
(beforeExport) |
Function |
plotly_beforeexport |
|
(buttonClicked) |
Function |
plotly_buttonclicked |
|
(plotlyClick) |
Function |
plotly_click |
why not (click)? |
(clickAnnotation) |
Function |
plotly_clickannotation |
|
(deselect) |
Function |
plotly_deselect |
|
(doubleClick) |
Function |
plotly_doubleclick |
|
(framework) |
Function |
plotly_framework |
|
(hover) |
Function |
plotly_hover |
|
(legendClick) |
Function |
plotly_legendclick |
|
(legendDoubleClick) |
Function |
plotly_legenddoubleclick |
|
(react) |
Function |
plotly_react |
|
(relayout) |
Function |
plotly_relayout |
|
(restyle) |
Function |
plotly_restyle |
|
(redraw) |
Function |
plotly_redraw |
|
(selected) |
Function |
plotly_selected |
|
(selecting) |
Function |
plotly_selecting |
|
(sliderChange) |
Function |
plotly_sliderchange |
|
(sliderEnd) |
Function |
plotly_sliderend |
|
(sliderStart) |
Function |
plotly_sliderstart |
|
(transitioning) |
Function |
plotly_transitioning |
|
(transitionInterrupted) |
Function |
plotly_transitioninterrupted |
|
(unhover) |
Function |
plotly_unhover |
|
(relayouting) |
Function |
plotly_relayouting |
|
(treemapclick) |
Function |
plotly_treemapclick |
|
(sunburstclick) |
Function |
plotly_sunburstclick |
<plotly-plot> component supports injection of user-defined contents:
<plotly-plot>
user-defined Angular template
</plotly-plot>will put the user template into the root <div> of the resulting plotly.js plot, in front of any plotly-generated elements. This could be useful for implementing plot overlays.
To get started:
$ npm installTo see the demo app, run:
$ npm startTo run the tests:
$ npm run testPlease, check the FAQ
© 2019 Plotly, Inc. MIT License.