@ng-vcl/plotly

21.03.2017.

Be aware of this Plotly bug.

API

Properties:

Name	Type	Default	Description
plotId	string	undefined	plot div id
plotClass	string	undefined	plot div classes
data	any[]	undefined	plot data
layout	any	undefined	plot layout
configuration	any	undefined	plot configuration
events	any	undefined	plot events, see "Attaching events" below
plot	any	undefined	plot div (HTMLElement)
debug (1)	boolean	false	whether to output event information in the console

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

Methods:

Name	Arguments	Description
restyle	update: any, traces?: number[]	Plotly.restyle wrapper
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 (polyfills.ts or some other file)

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

import '@ng-vcl/plotly';

import 'zone.js/dist/zone';

See also: https://github.com/plotly/plotly.js/issues/955.

app.module.ts

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

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

myAwesomePlotly.component.ts

<vcl-plotly *ngIf="data"
  [debug]="debug"
  [plotId]="plotId"
  [data]="data"
  [layout]="layout"
  [configuration]="configuration"
  [events]="events">
</vcl-plotly>

Attaching events

The events field is an object just like layout and configuration. To attach your custom events to the plotly plot, see the possible events and create them like so:

const events = {
  plotly_click: (data: any, event: any, plotId: string, plot: any, Plotly: any) => {
    ...
  }
}

Note: if you want to add a plotly_afterplot event handler, you'll have to manually set afterPlot to true.

vclPlotlyComponent.afterPlot = true

Debug

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

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