angular-plotly.js

A plotly.js Angular component from Plotly.

---

Content

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

Installation

$ npm install angular-plotly.js plotly.js

Using the angular CLI to start a new project

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

Quick start

Add the PlotlyModule 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],
    ...
})
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:

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

API Reference

Basic Props

Warning: for the time being, this component may mutate its layout and data props in response to user input, going against React rules. This behaviour will change in the near future once plotly/plotly.js#2389 is completed.

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 only when the revision is incremented.
onInitialized	Function(figure, graphDiv)	undefined	Callback executed after plot is initialized. See below for parameter information.
onUpdate	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.
onPurge	Function(figure, graphDiv)	undefined	Callback executed when component unmounts, before Plotly.purge strips the graphDiv of all private attributes. See below for parameter information.
onError	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/

Development

To get started:

$ npm install

To see the demo app, run:

$ npm start

To run the tests:

$ npm run test

License

© 2018 Plotly, Inc. MIT License.