angular-plotly.js

A plotly.js Angular component from Plotly.

---

Supports Angular 9.x and up. If you want to use with Angular 8.x, please use version [email protected].

Content

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

Installation

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-dev

Quick start

Add 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:

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

API Reference

Basic Props

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 handler props

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

Customizing <plotly-plot> component

<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.

Development

To get started:

$ npm install

To see the demo app, run:

$ npm start

To run the tests:

$ npm run test

FAQ

Please, check the FAQ

License

© 2019 Plotly, Inc. MIT License.