angular-plotly-react v0.2.1

plotly.js component for Angular

Provides a PlotlyComponent for working with Plotly.js
This library is designed around the Plotly.react() API (available since Plotly.js 1.34.0)

There is an official angular-plotly.js library. However, angular-plotly-react has a different design, which is discussed at the bottom of this page.

angular-plotly-react installation

1. Install the angular-plotly-react package
2. import PlotlyModule in one of your Angular modules
   import { PlotlyModule } from 'angular-plotly-react';
3. (optional) install dev dependency: @types/plotly.js

By default the Plotly global will be used, or if it doesn't exist, plotly.js will be downloaded from the CDN https://cdn.plot.ly/plotly-latest.min.js

PlotlyComponent usage

If you installed @types/plotly.js you may want to import and use these types:
import {Config, Layout, ScatterData} from 'plotly.js';

Create your trace(s) data. See the Plotly.js documentation examples and full reference.

    data: Partial<ScatterData>[] = [
      {
        type: 'scatter',
        x: [1, 2, 3, 4],
        y: [2, 4, 3, 0.5]
      }
    ];

In your template: <plotly [data]="data"></plotly>

At minimum, only traces data is required. However, you probably want to set a config to adjust Plotly's buttons and a layout to adjust margins:
<plotly [data]="data" [layout]="layout" [config]="config"></plotly>

  layout: Partial<Layout> = {
    title: 'Hello Plotly!',
    margin: {
      t: 36, r: 16, b: 30, l: 24
    }
  };

  config: Partial<Config> = {
    displaylogo: false,
    showLink: false,
    modeBarButtonsToRemove: [
      'sendDataToCloud'
    ]
  };

Resizing

To update the plotly chart when <plotly> is resized, you can provide an Observable to [resize$] or call PlotlyComponent.react().

If you're using material2, you can use ViewportRuler to get an Observable that emits when the window size changes:

  constructor(private viewportRuler: ViewportRuler) {}

  ngOnInit() {
    this.resize$ = this.viewportRuler.change(100);
  }

plotly.js loading customization

Synchronous loading

You can create the Plotly global by either:
Adding <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> to index.html
OR
In an @angular/cli project, install plotly.js and add "node_modules/plotly.js/dist/plotly-basic.min.js" to scripts in angular.json

Alternatively, instead of loading the Plotly global, you can import it within AppModule and pass it to PlotlyModule:

import * as Plotly from 'plotly.js/dist/plotly.min.js';
...
import: [
  PlotlyModule.forRoot({ plotly: Plotly })
]

Asynchronous loading

With an asynchronous configuration, plotly.js will be downloaded on demand. To preload, set preload: true in PlotlyModule's config. preload is delayed by 250ms by default, which can be configured with delay.

In AppModule

import: [
  PlotlyModule.forRoot({ url: 'https://cdn.plot.ly/plotly-latest.min.js' })
]

Alternatively, with @angular/cli > 6.0, you can configure lazy global scripts in angular.json:

"scripts": [
  { "input": "node_modules/plotly.js/dist/plotly-basic.min.js", "bundleName": "plotly", "lazy": true }
]

In AppModule

import: [
  PlotlyModule.forRoot({ url: 'plotly.js' })
]

angular-plotly.js discussion

There is an official angular-plotly.js library. However, I decided to publish angular-plotly-react because of some fundamental design differences. For comparison, see:

• angular-plotly.js PlotlyComponent
• angular-plotly-react PlotlyComponent

Summary:

• angular-plotly.js requires that you install plotly.js and provides no way to choose the build (see issue #5)
  import * as Plotlyjs from 'plotly.js/dist/plotly.js';
  angular-plotly-react just uses the Plotly global by default and supports multiple ways of loading plotly.js.
• angular-plotly.js has some strange change detection code, which I worry will impact performance when plotting lots of data. I plan to test this and report the issue.
• angular-plotly.js creates an Output() EventEmitter for every Plotly event (about 26) and hooks all of them even if you don't use the event.
• Currently, angular-plotly-react manages datarevision for you and increments it when data changes, which simplifies usage.
• angular-plotly-react currently lacks a few features such as [divId], [style], [className], [debug], but IMO these aren't needed. Submit an issue if you think otherwise.
• (error) Plotly.react() does not seem to throw errors (at least with bad trace data), so angular-plotly-react has no error reporting system. needs more research

Development

This project was generated with Angular CLI version 6.0.3.

The default angular-plotly project is an app for testing the angular-plotly-react library.

Build angular-plotly-react library: ng build angular-plotly-react