Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 344 Commits
.circleci		.circleci
.github		.github
projects/plotly		projects/plotly
.editorconfig		.editorconfig
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
FAQ.md		FAQ.md
LICENSE		LICENSE
README.md		README.md
angular-plotly.png		angular-plotly.png
angular.json		angular.json
devdocs.md		devdocs.md
example.png		example.png
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json

Repository files navigation

angular-plotly.js

Aplotly.js Angular component fromPlotly.

Supports Angular 9.x and up. If you want to use with Angular 8.x, please use versionangular-plotly.js@1.x.

Content

Installation

Using theangular 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 thePlotlyModule into the main app module of your project

import{NgModule}from'@angular/core';import{CommonModule}from'@angular/common';import*asPlotlyJSfrom'plotly.js-dist-min';import{PlotlyModule}from'angular-plotly.js';PlotlyModule.plotlyjs=PlotlyJS;@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:

Theplotly.js is bundled within the angular code. To avoid this, please readhow to customize the plotlyjs bundle below.

API Reference

Basic Props

Prop	Type	Default	Description
`[data]`	`Array`	`[]`	list of trace objects (seehttps://plot.ly/javascript/reference/)
`[layout]`	`Object`	`undefined`	layout object (seehttps://plot.ly/javascript/reference/#layout)
`[frames]`	`Array`	`undefined`	list of frame objects (seehttps://plot.ly/javascript/reference/)
`[config]`	`Object`	`undefined`	config object (seehttps://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, 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/

@Component({selector:'plotly-example',template:`    <plotly-plot [data]="graph.data" [layout]="graph.layout"       [useResizeHandler]="true" [style]="{position: 'relative', width: '100%', height: '100%'}">    </plotly-plot>`,})exportclassPlotlyExampleComponent{publicgraph={data:[{x:[1,2,3],y:[2,5,3],type:'bar'}],layout:{autosize:true,title:'A Fancy Plot'},};}

Event handler props

Event handlers for specificplotly.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 resultingplotly.js plot,in front of any plotly-generated elements. This could be useful for implementing plot overlays.

Customizing the`plotly.js` bundle

By default, this library bundlesplotly.js from the peer dependency together within the output. This results on huge outputs, forplotly.js itself is ~3MB when bundled. It also makes the build (withng serve --prod) really slow, for it minifies everything together.

If you wish to optimize loadingplotly.js in a different way, please check bothPlotlyViaCDNModule andPlotlyViaWindowModule modules below.

Plotly Via CDN Module

If you want to loadplotly.jsfrom a CDN, use thePlotlyViaCDNModule and set on thePlotlyViaCDNModule.plotlyVersion property the plotly.js's version you want to use and, optionally, you can also set on thePlotlyViaCDNModule.plotlyBundle property the plotly.js's build you want to use:

import{NgModule}from'@angular/core';import{CommonModule}from'@angular/common';import{PlotlyViaCDNModule}from'angular-plotly.js';PlotlyViaCDNModule.setPlotlyVersion('1.55.2');// can be `latest` or any version number (i.e.: '1.40.0')PlotlyViaCDNModule.setPlotlyBundle('basic');// optional: can be null (for full) or 'basic', 'cartesian', 'geo', 'gl3d', 'gl2d', 'mapbox' or 'finance'@NgModule({imports:[CommonModule,PlotlyViaCDNModule,],    ...})exportclassAppModule{}

By default, plotly's CDN is used to fetch the requested bundle.js. However, you can either chooseplotly,cloudflare orcustom.

...// For cloudflarePlotlyViaCDNModule.setPlotlyVersion('1.55.2','cloudflare');// cloudflare doesn't support `latest`. It is mandatory to supply version.PlotlyViaCDNModule.setPlotlyBundle('basic');// optional: can be null (for full) or 'basic', 'cartesian', 'geo', 'gl3d', 'gl2d', 'mapbox' or 'finance'// For custom CDN URLPlotlyViaCDNModule.loadViaCDN('custom','https://custom.cdn/url');// can be used directly for any self hosted plotly bundle...

Plotly Via Window Module

plotly.js can be added as aglobal script on angular.json to avoid it being bundled into the final project's code. To make this happen, you must first addplotly.js path intoangular.json file as shown below:

// angular.json{    ..."projects":{"project-name":{// This is your project's name            ..."architect":{"build":{                    ..."options":{"scripts":["node_modules/plotly.js-dist-min/plotly.min.js"// add this]}}}...}}}

This will includeplotly.js into thevendor.js file generated by angular CLI build process, andplotly.js library will be loaded before angular and your project's code. Thewindow.Plotly will be available. Thus, you must usePlotlyViaWindowModule module to forceangular-plotly.js to usewindow.Plotly object:

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

If you want to use adifferent precompiled bundle or if you wish toassemble you own customized bundle, you can usePlotlyViaWindowModule to force the use ofwindow.Plotly object as shown above.