21.03.2017.

Be aware of this Plotly bug.

API

Properties:

Input()

Name	Type	Default	Description
debug (1)	boolean	false	whether to output debug information in the console
plotId	string	''	plot div id
plotClass	string	''	plot div classes
data	Plotly.Data[]		plot data
layout	Plotly.Layout		plot layout
configuration	Plotly.Configuration		plot configuration
events	[event: string]: Function		plot events, see "Attaching events" below
frames	Plotly.Frame		plot frames
width	number		the width of the plot in percentage relative to the parent element
height	number		the height of the plot in percentage relative to the parent element

(1) Suggested use is in conjunction with browsing the plotly code.

Public

Name	Type	Default	Description
afterPlot	boolean		Whether the plot has been drawn for the first time
plot	HTMLElement		The plot's HTML element

Methods:

Name	Arguments	Description
restyle	update: any, traces?: number[]	Plotly.restyle wrapper
resize		Plotly.resize wrapper - resize the plot
relayout	layout: any = this.layout	Plotly.relayout wrapper
update		Plotly.update wrapper
redraw		Plotly.redraw wrapper - force a full recalculation and redraw of the plot
recreate		Plotly.newPlot wrapper
addTraces	traces: any OR any[], index?: number	Plotly.addTraces wrapper
deleteTraces	traces: number OR number[]	Plotly.deleteTraces wrapper

Usage

Using with webpack

The plotly package provides a special entry point for webpack. Add "webpack" to resolve.mainFields in your webpack config file.

resolve: {
  mainFields: ["webpack", "module", "browser", "main"],
  ...
}

Importing plotly

if you want to use Plotly.js in combination with zone.js, you must include ng-plotly before zone.js in your project!

import '@n-fuse/ng-plotly';

import 'zone.js/dist/zone';

See also: plotly/plotly.js#955.

app.module.ts

import { VCLPlotlyModule } from '@n-fuse/ng-plotly';

@NgModule({
    ...
    imports: [
      VCLPlotlyModule
    ]
    ...
})
export class AppModule {}

myAwesomePlotly.component.html

<plotly #plotly *ngIf="data"
  [debug]="debugPlot"
  [plotId]="plotId"
  [plotClass]="plotClass"
  [data]="data"
  [layout]="layout"
  [configuration]="configuration"
  [events]="events"
  [frames]="frames"
  [width]="width"
  [height]="height">
</plotly>

Events

Plotly events are called with this signature:

EventListener(data, event, this, Plotly);

Where this is the instance of PlotlyComponent.

To attach event listeners to the plot, see the available list of events or import PlotlyEvents from @n-fuse/ng-plotly and create them like so:

const events = {
  [PlotlyEvent.Click]: (data, event, plot: PlotlyComponent, Plotly) => {
    ...
  }
}

Debug

It's also possible to enable the debug flag to output information in the console.

<plotly
  ...
  [debug]="true"
  ...>
</plotly>