Plotly vcl component

Usage no npm install needed!

<script type="module">
  import ngVclPlotly from 'https://cdn.skypack.dev/@ng-vcl/plotly';



Be aware of this Plotly bug.




Name Type Default Description
debug (1) boolean false whether to output debug information in the console
plotId string '' plot div id
plotHoverInfoId string '' hoverinfo div id, defaults to ${this.plotId}HoverInfo
plotClass string '' plot div classes
plotHoverInfoClass string '' hoverinfo 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


afterPlot | boolean | | Whether the plot has been drawn for the first time plot | HTMLElement | | The plot's HTML element hoverInfo | HTMLElement | | An HTML element which can be used as a custom hoverinfo

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


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


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.


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

    imports: [
export class AppModule {}


<vcl-plotly *ngIf="data"

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


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