plotly / angular-plotly.js

An R package for creating interactive web graphics via the open source JavaScript graphing library plotly.js.

Installation

Install from CRAN:

install.packages("plotly")

Or install the latest development version (on GitHub) via {remotes}:

remotes::install_github("plotly/plotly")

Getting started

Web-based ggplot2 graphics

If you use ggplot2, ggplotly() converts your static plots to an interactive web-based version!

library(plotly)
g <- ggplot(faithful, aes(x = eruptions, y = waiting)) +
  stat_density_2d(aes(fill = ..level..), geom = "polygon") + 
  xlim(1, 6) + ylim(40, 100)
ggplotly(g)

By default, ggplotly() tries to replicate the static ggplot2 version exactly (before any interaction occurs), but sometimes you need greater control over the interactive behavior. The ggplotly() function itself has some convenient “high-level” arguments, such as dynamicTicks, which tells plotly.js to dynamically recompute axes, when appropriate. The style() function also comes in handy for modifying the underlying trace attributes (e.g. hoveron) used to generate the plot:

gg <- ggplotly(g, dynamicTicks = "y")
style(gg, hoveron = "points", hoverinfo = "x+y+text", hoverlabel = list(bgcolor = "white"))

Moreover, since ggplotly() returns a plotly object, you can apply essentially any function from the R package on that object. Some useful ones include layout() (for customizing the layout), add_traces() (and its higher-level add_*() siblings, for example add_polygons(), for adding new traces/data), subplot() (for combining multiple plotly objects), and plotly_json() (for inspecting the underlying JSON sent to plotly.js).

The ggplotly() function will also respect some “unofficial” ggplot2 aesthetics, namely text (for customizing the tooltip), frame (for creating animations), and ids (for ensuring sensible smooth transitions).

Using plotly without ggplot2

The plot_ly() function provides a more direct interface to plotly.js so you can leverage more specialized chart types (e.g., parallel coordinates or maps) or even some visualization that the ggplot2 API won’t ever support (e.g., surface, mesh, trisurf, etc).

plot_ly(z = ~volcano, type = "surface")

Learn more

To learn more about special features that the plotly R package provides (e.g., client-side linking, shiny integration, editing and generating static images, custom events in JavaScript, and more), see https://plotly-r.com. You may already be familiar with existing plotly documentation (e.g., https://plotly.com/r/), which is essentially a language-agnostic how-to guide for learning plotly.js, whereas https://plotly-r.com is meant to be more wholistic tutorial written by and for the R user. The package itself ships with a number of demos (list them by running demo(package = "plotly")) and shiny/rmarkdown examples (list them by running plotly_example("shiny") or plotly_example("rmd")). Carson also keeps numerous slide decks with useful examples and concepts.

Contributing

Please read through our contributing guidelines. Included are directions for opening issues, asking questions, contributing changes to plotly, and our code of conduct.

angular-plotly.js's Issues

Reset Zoom (From Angular App)

I have successfully used angular-plotly.js to embed a Plotly.js chart within my Angular application.

If I update the X or Y data then the chart updates as expected.

The user is able to zoom using the standard Plotly.js zoom functionality and the user can double-click to reset the zoom level.

1. Is it possible to reset the zoom level from within the Angular application (e.g. if a button outside the Ploylt.js chart is clicked then reset the zoom level of the chart as though the user double-clicked the chart)?

2. Is it possible to obtain the zoom level and/or min and max values for the range displayed after the user has zoomed? The events do not seem to receive the necessary data values.

License missing

This repo should have an MIT license please :)

Customize the plotly.js bundle

Is there a way to customize the plotly.js bundle or load plotly.js via CDN?

Would be great to reduce the app size as a new Angular 6 app with angular-plotly.js is already 2.83 MB.

Error: Invalid PlotlyJS object at new PlotlyModule (angular-plotly.js.js:582)

Error: Invalid PlotlyJS object at new PlotlyModule (angular-plotly.js.js:582)

I have installed
$ npm install angular-plotly.js plotly.js --save

But still getting this error in angular 6 project.
Need help

Plot not updating

Hi,

I am trying to show livedata from an API in a plotly graph updating 1-2 times per second.
Sadly I don't manage to update the graph, the code below draws the initial graph, than once more after 20 updates and than never again. Selecting or deselecting one of the traces draws everything correctly.
Any help what I am missing or if there is some bug present would be really appreciated.

HTML:
<plotly-plot [data]="graph.data" [layout]="graph.layout" useResizeHandler="true"></plotly-plot>

TS:

import {Component, OnDestroy, OnInit} from '@angular/core';
import {LiveMeasurementsService} from '../../services/live-measurements.service';
import {LiveData} from '../../model/live-data';

@Component({
  selector: 'app-live',
  templateUrl: './live.component.html',
  styleUrls: ['./live.component.css'],
})
export class LiveComponent implements OnInit, OnDestroy {

  private timestamps: Date[];
  private y1: number[];
  private y2: number[];
  private y3: number[];
  private graph;

  private timeoutID;

  constructor(public live: LiveMeasurementsService) {
  }

  ngOnInit() {
    this.timestamps = [];

    this.y1 = [];
    this.y2 = [];
    this.y3 = [];

    this.graph = {
      data: [
        {x: this.timestamps, y: this.y1, type: 'scatter'},
        {x: this.timestamps, y: this.y2, type: 'scatter'},
        {x: this.timestamps, y: this.y3, type: 'scatter'},
      ],
      layout: {
        autosize: true,
        title: 'Live Plot',
        font: {family: 'Roboto, "Helvetica Neue", sans-serif'},
        margin: {t: 50, b: 20, l: 40, r: 40},
      }
    };

    this.startUpdate();
  }

  startUpdate() {
    this.timestamps.push(new Date());
    this.y1.push(Math.random());
    this.y2.push(Math.random());
    this.y3.push(Math.random());
    this.timeoutID = setTimeout(() => this.startUpdate(), 1000);
  }

  updateGraph(values: LiveData) {

  }

  ngOnDestroy(): void {
    clearTimeout(this.timeoutID);
  }
}

Error: Resize must be passed a displayed plot div element.

The graphs resizes fine but when I resize my window, I get the following error in the console:
"Error: Resize must be passed a displayed plot div element."

    <plotly-plot [data]="graph.data" [config]="graph.config" [layout]="graph.layout"></plotly-plot>

      this.graph = {
        data: data,
        layout: layout,
        config: {responsive: true}
      };

when I remove config: {responsive: true} the error disappears. Kindly let me know how to remove the error

Update to Plotly 1.38.3

The latest version of plotly.js is 1.38.3

PlotlyViaCDNModule gives Error: Peer dependency plotly.js isn't installed

Hi good Sir,

I want to change form PlotlyModule to PlotlyViaCDNModule.

If I change to PlotlyViaCDNModule in my modules imports I get this error in the browser console:

angular-plotly.js.js:416 Error while plotting: Error: Peer dependency plotly.js isn't installed

Prior to this change my charts where rendering fine!

Versions:

@angular/[email protected]
[email protected]
[email protected]

Module:

... imports

PlotlyViaCDNModule.plotlyVersion = '1.5.0'; // can be `latest` or any version number (i.e.: '1.4.3')
PlotlyViaCDNModule.plotlyBundle = 'basic'; // optional: can be null (for full) or 'basic', 'cartesian', 'geo', 'gl3d', 'gl2d', 'mapbox' or 'finance'


const routes: Routes = [
  {
    path: '',
    component: AnalyseComponent,
  }
];

@NgModule({
  declarations: [AnalyseComponent, CrcBarChartComponent],
  imports: [
    CommonModule,
    PlotlyViaCDNModule,
    MatCardModule, MatButtonModule,
    RouterModule.forChild(routes)
  ],
  exports: [
    RouterModule
  ]
})
export class AnalyseModule { }

Kind Regards,
Frank

-

Error: Resize must be passed a displayed plot div element.

Related to #24

I have produced a minimal reproduction here https://github.com/ryanjackman/angular-plotly.js/
Build & serve the app. Navigate to Box Plots, click button to hide plot, resize window, and observe the console for the error.

ERROR Error: Uncaught (in promise): Error: Resize must be passed a displayed plot div element.
Error: Resize must be passed a displayed plot div element.

This issue occurs when a plot is hidden with an *ngIf and the window is resized.

To create a responsive plot the README says set useResizeHandler to true in the template and set autosize true in the plot layout. This was not enough to make a responsive plot inside a flexbox. The plot would resize larger but not smaller.
I was able to get this to work by setting the plot's config.responsive to true.

It was setting config.responsive to true that caused the error to show up.

This is sort of a two part issue related to plots in flexboxes.

• When configured to be responsive, plots in flexboxes that have been hidden throw errors when resized.
• A plot is not fully responsive inside a flexbox when configured per the README

---

Seen in Chrome, not seen in Firefox.
angular-plotly.js 1.0.1
plotly.js 1.43.1

How to use Plotly.extendTraces in wrapper <plotly-plot></plotly-plot>

i am trying to achieve Plotly.extendTraces method. i have installed plotly/angular-plotly.js and trying to plot use extendtraces method

plotly.js always gets bundled

Expected Behavior

Plotly.js does not get bundled into the production build if you are using either the PlotlyViaCDNModule or the PlotlyViaWindowModule.

Actual Behavior

Plotly.js always gets bundled into the chunk the module is imported in (usually main).
This only happens if you install angular-plotly via npm, but not with the source project.

Steps to Reproduce the Problem

1. Make a new angular project with angular-plotly.js and plotly.js (like described in the README.md)
2. Add either of the two modules to the app.module.ts (like described in the README.md)
3. Create a production build with ng build --prod
   You will notice that plotly.js will be bundled into the main.<hash>.js bundle (file size ~3MB)

Specifications

• Version: 1.1.0

Other Notes

As mentioned above this only happens if you install angular-plotly.js via npm.
If you download the sources (plotly-via-cdn.module.ts and the shared/ folder) and add them manually everything works as intended.
I don't know enough about npm-packages, but it seems that bundling makes it so all Modules are imported into the application as soon as you import one.

Plot not displayed until hovered

Just added the plotly on my angular application on [email protected]. I am loading data from an API:

// html
<plotly-plot [data]="chartData" [layout]="graphLayout"></plotly-plot>
// ts
fetch().then(data => this.chartData = data)

When the data is fetched, the graph does not display anything, but as soon as I hover the chart then it appears.

I have tried using plotly directly like so:

// html
<div id="plot"></div>
// ts
import * as Plotlyjs from 'plotly.js/dist/plotly.min.js';
fetch().then(data => Plotlyjs.plot(document.getElementById('plot', data)))

and it works without having to hover the chart

Almost 8 MB addition why use plotty.min.js and plotty.js?

Feature request for 'animation' for new plots in a graph

Improve docs for PlotlyViaWindowModule

@andrefarzat PlotlyViaWindowModule example is a bit hard to understand for the people who are new to the angular community. Can you give a full example in the readme file?

Originally posted by @alwaysprep in #5 (comment)

(selected) does not work although (selecting) does

I'm not sure why this particular event should act differently from the others, but (selected) doesn't seem to work.

I can't get this package working in stackblitz but a minimal angular-cli project that demonstrates this can be seen here. Selecting points on the left plot triggers a bunch of (selecting) events but completing the selection does not trigger a (selected). For some reason single-clicking anywhere on plot generates a (selected) event with an undefined payload.

Responsive angular-plotly inside mat-tab control

Hi,

I have a question regarding the use of angular-plotly inside a mat-tab component.

I have a component below which works well to responsively resize when added to another simple page component.

<div style="width:100%;height:100%;">
    <plotly-plot [data]="plotlyGraphData" [layout]="plotlyGraphLayout" [useResizeHandler]="true" [config]="plotlyGraphOptions" [style]="{height:'100%', width:'100%'}"></plotly-plot>
</div>

However if this component is placed within a mat-tab component then none of the plots are resized correctly upon switching tabs.
We also often see the message "core.js:1440 ERROR Error: Uncaught (in promise): Error: Resize must be passed a displayed plot div element.
Error: Resize must be passed a displayed plot div element."

We've had similar issues in the past when wrapping plotly in our own angular component and had to workaround this by resizing the grid in ngAfterContentChecked like so

ngAfterContentChecked(): void {
    const element = this.plotlyDiv.nativeElement;

    if (this.isVisible === false && element.offsetParent != null) {
      this.isVisible = true;
      // Refresh the grid
      this.resizePlotly();
    } else if (this.isVisible === true && element.offsetParent == null) {
      this.isVisible = false;
    }
  }

Is there any chance that this could be looked into please? Or, if not is there any suggestion of how we could handle it effectively.

Thanks.

Plotly component.d.ts build issues.

I'm adding angular-plotly.js to my Angular project but I get an error when building my application.

ERROR in C:\Users\user\Documents\projects\chartProject\node_modules\angular-plotly.js\src\app\plotly\plot\plot.component.d.ts
(10,19): error TS2315: Type 'KeyValueDiffer' is not generic.

ERROR in C:\Users\user\Documents\projects\chartProject\nexus\node_modules\angular-plotly.js\src\app\plotly\plot\plot.component.d.ts
(11,17): error TS2315: Type 'IterableDiffer' is not generic.

This is my package.json:

`{
  "name": "nexus",
  "version": "4.2.0",
  "dependencies": {
    "@angular/common": "2.4.10",
    "@angular/compiler": "2.4.10",
    "@angular/compiler-cli": "0.6.0",
    "@angular/core": "2.4.10",
    "@angular/forms": "2.4.10",
    "@angular/http": "2.4.10",
    "@angular/platform-browser": "2.4.10",
    "@angular/platform-browser-dynamic": "2.4.10",
    "@angular/platform-server": "2.4.10",
    "@angular/router": "3.4.10",
    "@angular/upgrade": "2.4.10",
    "@fortawesome/fontawesome-free": "^5.1.0",
    "@ngrx/core": "^1.2.0",
    "@ngrx/store": "^2.2.1",
    "angular-plotly.js": "^0.1.15",
    "chart.js": "^2.7.2",
    "chartjs-plugin-annotation": "^0.5.7",
    "core-js": "^2.4.1",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.35.0",
    "geographiclib": "^1.48.0",
    "less": "^2.5.3",
    "lodash": "^3.10.1",
    "moment": "^2.14.1",
    "paper": "^0.9.25",
    "plotly.js": "^1.41.3",
    "primeng": "^2.0.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.4.3",
    "systemjs": "0.19.27",
    "ts-loader": "^0.7.2",
    "typings": "^1.3.2",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "copy-webpack-plugin": "^0.3.3",
    "css-loader": "^0.23.0",
    "del": "^2.0.2",
    "event-stream": "^3.3.1",
    "exports-loader": "0.6.2",
    "expose-loader": "^0.7.1",
    "file-loader": "^0.8.4",
    "gulp": "^3.9.0",
    "html-webpack-plugin": "^1.7.0",
    "http-server": "^0.8.5",
    "imports-loader": "^0.6.4",
    "istanbul-instrumenter-loader": "^0.1.3",
    "json-loader": "^0.5.3",
    "nodemon": "^1.18.4",
    "phantomjs": "^1.9.18",
    "phantomjs-polyfill": "0.0.1",
    "protractor": "^3.0.0",
    "raw-loader": "0.5.1",
    "remap-istanbul": "^0.5.1",
    "rimraf": "^2.4.4",
    "style-loader": "^0.13.0",
    "ts-helper": "0.0.1",
    "tsconfig-lint": "^0.4.3",
    "tslint": "^3.2.0",
    "tslint-loader": "^2.1.0",
    "typedoc": "^0.3.12",
    "typescript": "2.5.3",
    "url-loader": "^0.5.6",
    "webpack": "^1.12.9",
    "webpack-build-notifier": "^0.1.25",
    "webpack-dev-server": "^1.12.1",
    "webpack-md5-hash": "0.0.4"
  },
}

`

Has anyone else encountered this issue? If so, how did you fix it?

Problem with PlotlyViaCDNModule when I compile with ng build --prod

Hello I have a problem with PlotlyViaCDNModule when I compile with ng build --prod

Hash: 8d519d992aa0ee88279c
Time: 34126ms
chunk {0} runtime.a5dd35324ddfd942bef1.js (runtime) 1.41 kB [entry] [rendered]
chunk {1} main.5f13b498ec6976cdb0c7.js (main) 128 bytes [initial] [rendered]
chunk {2} polyfills.cc3ea7a3070884bdee7e.js (polyfills) 130 bytes [initial] [rendered]
chunk {3} styles.64fe2706f12765a8ab43.css (styles) 160 kB [initial] [rendered]
chunk {scripts} scripts.07c356063033e4276441.js (scripts) 365 kB [entry] [rendered]

ERROR in Error during template compile of 'AppModule'
  Function calls are not supported in decorators but 'PlotlyViaCDNModule' was called.

I'm using angular 7.2.0

My package.json is:

  "name": "infosys",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build-prod": "ng build --prod -aot false",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@amcharts/amcharts3-angular": "^2.1.0",
    "@angular/animations": "~7.2.0",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    "@angular/http": "~7.2.0",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "@auth0/angular-jwt": "^1.1.0",
    "@ng-bootstrap/ng-bootstrap": "^4.0.3",
    "@ngui/map": "^0.20.2",
    "@nguniversal/express-engine": "^7.1.0",
    "@ngx-translate/core": "^9.0.0",
    "@ngx-translate/http-loader": "^2.0.0",
    "@swimlane/ngx-datatable": "^13.1.0",
    "@types/googlemaps": "^3.30.8",
    "@types/lodash": "^4.14.106",
    "@types/moment-range": "^3.1.0",
    "acorn": "^6.1.0",
    "angular-crumbs": "^3.0.1",
    "angular-plotly.js": "^1.0.1",
    "angular-svg-icon": "^5.0.0",
    "angular2-cookie-law": "^7.0.1",
    "bootstrap": "^4.0.0",
    "chart.js": "^2.7.2",
    "chartjs-plugin-zoom": "^0.6.3",
    "core-js": "^2.5.4",
    "coveralls": "3.0.0",
    "file-saver": "^1.3.3",
    "hammerjs": "^2.0.8",
    "jquery": "^3.3.1",
    "lodash": "^4.17.5",
    "moment": "^2.22.0",
    "moment-range": "^3.1.1",
    "ng-socket-io": "^0.2.4",
    "ng2-charts": "^1.6.0",
    "ngx-bootstrap": "^2.0.0-beta.8",
    "ngx-cookie": "^4.1.2",
    "ngx-moment": "^2.0.0-beta.0",
    "normalize.css": "^7.0.0",
    "plotly.js": "^1.44.4",
    "popper.js": "^1.12.9",
    "promise-polyfill": "^7.1.2",
    "rxjs": "~6.3.3",
    "rxjs-compat": "^6.4.0",
    "tether": "^1.4.3",
    "ts-helpers": "^1.1.2",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular/cli": "~7.3.1",
    "@angular/compiler-cli": "~7.2.0",
    "@angular/language-service": "~7.2.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.2.2"
  }
}

Can anybody help me ?

config not used?

  <plotly-plot [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' }]"
               [config]="{displayModeBar: false}"></plotly-plot>

Trying to hide the mode bar but it's not having any effect.

Locale

I'm trying to change the locale with the following:
plotly.component.ts:
public config = { locale: 'sv' };
plotly.component.html:
<plotly-plot [config]="config"></plotly-plot>
But nothing changes.
Locales for plotly are located in "node_modules/plotly.js/lib/locales/sv.js"
angular-plotly version 0.1.15
Am I missing something?

automatic resize does not work when screensize dynamically change using flex (bootstrap)

autosize:true works great when I manually change the size of the window, but eg. when I close my sidebar using an Angular material sidebar, the component stretches and the graph does not resize correctly. Only after manually dragging the window border the graph resizes back again.

Frames parameter not included

The docs contain the frames input-parameter but no input parameter is available and thus is never used.

Module Not Found: @etpinard/gl-text@^1.1.6

Hello, when I execute:

npm install plotly.js --save

this error is showed

npm ERR! 404 Not Found: @etpinard/gl-text@^1.1.6

New Plotly.js update broke ? ''ERROR TypeError: Cannot read property 'map' of undefined''

Hi,

I've been using plotly for quite some time now and everything in my app was working rather fine.
However, since about 12 days ago, my app stopped working without any change in the code.

        Plotly.newPlot(
            this.layout['title'], 
            this.traces, this.layout, 
            this.options);        

or Plotly.update give the same error :

ERROR TypeError: Cannot read property 'map' of undefined
    at Object.r.coerceTraceIndices (plotly-latest.min.js:7)
    at Object.J [as update] (plotly-latest.min.js:7)
    at SafeSubscriber.eval [as _next] (chart.component.ts:93)
    at SafeSubscriber.__tryOrUnsub (Subscriber.js:243)
    at SafeSubscriber.next (Subscriber.js:190)
    at Subscriber._next (Subscriber.js:131)
    at Subscriber.next (Subscriber.js:95)
    at AsyncAction.IntervalObservable.dispatch (IntervalObservable.js:80)
    at AsyncAction._execute (AsyncAction.js:119)
    at AsyncAction.execute (AsyncAction.js:94)

I can provide the contents of 'this.layout', 'this.traces' and 'this.options' if necessary.

I've noticed that a few hours before this problem, plotly.js had been updated with version 1.43.0
Is it due to an API change that would cause the angular wrapper to malfunction?

Can anyone tell me if they have had issues with it too since the update?

For now the fix I've made is to specify in head :
<script src="https://cdn.plot.ly/plotly-1.42.5.min.js"></script>
Rather than the latest.

Frames parameter not included

[frames] parameter is written in README docs, but it is not supported.

updatePlot() recreates plot

When updating a plot's data, updatePlot() calls createPlot() which uses plotly.newPlot(). Would it be possible to use Plotly.react or Plotly.update here instead?

How to apply animations for linear charts?

import { Component } from '@angular/core';

@Component({

        selector: 'plotly-example',
        template: '<plotly-plot [data]="graph.data" [layout]="graph.layout"></plotly-plot>',
    })
    export class PlotlyExampleComponent {
        public graph = {
            data: [
                { x: [1, 2, 3], y: [2, 6, 3], type: 'scatter', mode: 'points', marker: {color: 'black'}, line: {color: 'black', width: 2, dash: 'dashdot'} },
                { x: [1, 2, 3], y: [2, 5, 3],  type: 'scatter', mode: 'points', marker: {color: 'black'}, line: {color: 'black', width: 2, dash: 'dashdot'} },        ],
            layout: {width: 320, height: 240, title: 'Plot'}
        };
    }

How to show animations in linear charts to show transition of data line from starting to end point ?

Error Rendering chart

Having copied your example verbatim I have came across an issue on render.

Just to confirm there is no overriding tyles and it is the same a new project with no global styling.

Operating System: Windows (Also on Mac)

Below is images of the problem and the current angular version.

Dependency vulnerability: static-eval

Plotly.js angular 6 wrapper

Hi,

Is there any official angular 6 wrapper for plotly.js?
If not at the moment, do you have it in your roadmap, and when will it be released?

Thanks,

getInstanceByDivId?

Hi,
In older versions I was using getInstanceByDivId to fire the plotly resize function on multiple plots on the same page, e.g:

let plotlyDivs = [].slice.call(document.getElementsByClassName('js-plotly-plot'));
for (let div of plotlyDivs) {
    if (this.plotlyService.getInstanceByDivId(div.id)) {
        this.plotlyService.resize(this.plotlyService.getInstanceByDivId(div.id));
    }
}

That function seems to be removed in 1.0.0 - can someone please direct me to it's replacement? Thanks!

Click data issue

Hey!

I want to detect the click over a time series graph, I’m able to handle the click event itself through the [click] prop, is there a way to indirectly pass the data about the point/line that has been clicked to the click prop?

My bad, passing $event worked great

ERROR in node_modules/angular-plotly.js/src/app/plotly-via-cdn/plotly-via-cdn.mo dule.d.ts(8,10): error TS2315: Type 'ModuleWithProviders' is not generic.

Can anyone know how to resolve this error?
ERROR in node_modules/angular-plotly.js/src/app/plotly-via-cdn/plotly-via-cdn.mo
dule.d.ts(8,10): error TS2315: Type 'ModuleWithProviders' is not generic.

Followed below link
https://github.com/plotly/angular-plotly.js#quick-start

angular6 project

Feature request 'onHover' event

I'm really excited about this component! I currently depend on home-rolled access to the plotly_hover event. To adopt this, I'd need the onHover() event similar to the React plotly component.

Any ideas on timeline for events?

Can't get autosize to change plot height

As seen in

https://codesandbox.io/embed/52nw4n5n1x?fontsize=14&codemirror=1

am trying to get the plot to auto size to both the height and width of the containing element. The width changes perfectly but the height seems to be locked at 450px. I am using [useResizeHandler] =true.

Plotly Graphs Not Updating

When I change the value of the variable I am using in html to create the plotly plot the plot itself is not updating. What is the correct way to update the data inside of an angular plotly plot?

Invisible plot lines with WebGL (scattergl) in prod mode

I'm trying to draw standard plots with WebGL but the lines remain invisible :(
The data is loaded correctly, as you can see the values when hovering on the points, so it seems to be a problem of rendering for the lines. Note the markers (X) are correctly shown.

For WebGL i'm using data.type="scattergl" instead of the usual scatter. The reason is i have several hundreds of thousands of points to visualize and it's way faster with WebGL. Note the problem also occurs if i load very little data. However if i plot with scatter it works fine! So the code should be good. Also, if i build my angular library in dev mode, i.e. without build optimization, it works! So it's the combination of scattergl + prod mode that fails. Any idea to explain this bug?

This somehow looks similar to this old issue in plotly: plotly/plotly.js#942 but it's not related to WebGL nor any optimization. I have no idea how to debug this between your Angular wrapper and the plotly library. It's quite difficult to understand where the issue is.

lasso-select not showing the lasso outline most of the time

Fresh ng new project. Simple scatter plot. When I use the lasso select tool, dragging selects the points but does not leave an outline of the lasso, most of the time. Same behavior, either with 0.1.10 or 0.1.9.

        data: [
            { x: [1,3,5,4] , y: [4,5,3,6], type: 'scatter', mode: 'markers', marker: {color: 'red'} },
        ]

        layout: {autosize:true, title: 'A Fancy Plot'}

Feature Request: It is not possible to disable default click/doubleclick behavior for legends

From the official plotly documentation and when using simple JavaScript, it is possible to do something like this to disable the default behavior for legend clicking:
myPlot.on('plotly_legendclick', function(data){ return false; });

After looking into your code, the angular wrapper seems to simply register a corresponding EventEmitter for every plot event and does not provide a way to disable those events at all. It would be nice to be able to disable the legend click or double-click behavior. Maybe it is possible to build a property like [disableLegendClick] and [disableLegendDoubleClick] or something? Or transfer the 'return false' approach to the Angular wrapper, if technically possible.

My next approach would be to somehow get the underlying plotly div from the template through whatever means and manually overwrite the two events. But I am not sure which side-effects that might have and it also somehow defeats the purpose of the wrapper by working around it.

Any ideas? Is there a way I have not yet tried? I am not sure if this is actually a bug or a feature request. After I had a look into the code I simply assumed the latter. I am using version 1.1.0 of the wrapper and plotly.js 1.45.3.

Events not working for Production builds

Angular CLI: 6.2.2
Node: 8.11.3
OS: darwin x64
Angular: 6.1.1
Browser: Google Chromer Version 68.0.3440.106 (Official Build) (64-bit)

My <plotly-plot> component contains the following:

(hover)="handleHover($event)" (unhover)="handleUnhover($event)"

handleHover and handleUnhover simply console log the event.

If I run a development build using ng serve then everything functions correctly so it seems that in principle my code is fine.

If I create a production build using ng build --prod then the charts are still rendered correctly but my handleHover and handleUnhover functions do not get called and instead I see the following in the browser console:

main.f138b76c7351710df66b.js:1 ERROR TypeError: Cannot read property 'call' of undefined
    at main.f138b76c7351710df66b.js:1
    at a.emit (main.f138b76c7351710df66b.js:1)
    at HTMLDivElement.t.emit (main.f138b76c7351710df66b.js:1)
    at main.f138b76c7351710df66b.js:1
    at main.f138b76c7351710df66b.js:1
    at l (main.f138b76c7351710df66b.js:1)
    at Object.n.throttle (main.f138b76c7351710df66b.js:1)
    at Object.n.hover (main.f138b76c7351710df66b.js:1)
    at SVGRectElement.c.onmousemove [as __zone_symbol__ON_PROPERTYmousemove] (main.f138b76c7351710df66b.js:1)
    at SVGRectElement.S (polyfills.7a0e6866a34e280f48e7.js:1)
le @ main.f138b76c7351710df66b.js:1
t.handleError @ main.f138b76c7351710df66b.js:1
next @ main.f138b76c7351710df66b.js:1
e.object.i @ main.f138b76c7351710df66b.js:1
e.__tryOrUnsub @ main.f138b76c7351710df66b.js:1
e.next @ main.f138b76c7351710df66b.js:1
e._next @ main.f138b76c7351710df66b.js:1
e.next @ main.f138b76c7351710df66b.js:1
e.next @ main.f138b76c7351710df66b.js:1
e.emit @ main.f138b76c7351710df66b.js:1
(anonymous) @ main.f138b76c7351710df66b.js:1
e.invoke @ polyfills.7a0e6866a34e280f48e7.js:1
t.run @ polyfills.7a0e6866a34e280f48e7.js:1
t.runOutsideAngular @ main.f138b76c7351710df66b.js:1
onHandleError @ main.f138b76c7351710df66b.js:1
e.handleError @ polyfills.7a0e6866a34e280f48e7.js:1
t.runTask @ polyfills.7a0e6866a34e280f48e7.js:1
t.invokeTask @ polyfills.7a0e6866a34e280f48e7.js:1
_ @ polyfills.7a0e6866a34e280f48e7.js:1
m @ polyfills.7a0e6866a34e280f48e7.js:1

Specify bundle type with CDN module.

You can pass in a version like 1.4.3, but you can't specify a specific bundle like "basic". You always have to get the full Plotly. It would be nice to be able to specify a bundle to retrieve from the CDN.

The (click) output of plotly-plot fires twice

I am using the (click) output of <plotly-plot>. The associated component method fires twice. I use $event as argument from the html template. This argument has the associated ploytly plot data for the first invocation. The second invocation only has a regular MouseEvent.

webgl not supported?

Fresh ng cli project. Trying to display a scatter3d chart using this plotly component.

Page in chrome complains "Webgl is not supported by your browser - visit http://get.webgl.org for more info". Now if you click on it, get.webgl.org will tell you that "Your browser supports WebGL".

Some kind of ify-loader issue?

Edit:

So I ng eject the project, and add ify-loader to webpack.config.js. Now everything works.

Remaining question:

Does this component require ify-loader, and an ng ejected project, for webgl charts?

lasso-select and range-select not showing the select outline on mode: markers

Using ver. 1.0.1 the lasso-select and range-select not showing the select outline on mode: markers.
When the mode is Lines everything works as expected.

Export plot with custom settings

Hello,

I would like to export the plot with custom settings like type,height and width.
For plotly.js I would simply need to include the following:
modeBarButtonsToAdd: [ { name: 'Download plot as a svg', icon: Plotly.Icons.camera, click: function(gd) { Plotly.downloadImage(gd, { format: 'svg' }); } }, { name: 'Download plot as a png', icon: Plotly.Icons.camera, click: function(gd) { Plotly.downloadImage(gd, { format: 'png', height: 1800, width: 1000, filename: 'Auslegungsblatt' }); } } ]
Should I additionally use plotly js in my angular project to be able to use methods such as "Plotly.downloadImage" or what would be the propper way?

Thanks

Error: Invalid PlotlyJS object at new PlotlyModule (angular-plotly.js.js:582)

Error: Invalid PlotlyJS object at new PlotlyModule (angular-plotly.js.js:582)

I have installed
$ npm install angular-plotly.js plotly.js --save

But still getting this error in angular 6 project.
Need help

Prod mode label error

When build to prod mode every time I hover line to show label like this:

This error will show:

Any idea why?

Memory leak when using newPlot or update

Hi,

I'm running Plotly as a way to display data coming from a database, with around 800 new points/second.
As I let my application running, I notice that my RAM usage is steadily inscreasing, eating up to 10Gb of RAM over the course of half an hour.

Looking at Plotly issues on GitHub, I've noticed that Plotly users have reported that it was happening to them 1755 but I think that a recent patch was supposed to fix that.

I've tried both newPlot and update as a way to refresh my plot. Here's my current code :

       this.interval = interval(1000);
       this.subscribe = this.interval.subscribe(val => {
                this.traces = [this.data[0]];
                this.lastUpdateChange.emit(new Date());
                if(this.highThresholdEnabled || this.lowThresholdEnabled){
                    this.onThresholdChange();
                } else{
                    Plotly.update(
                        this.layout['title'], 
                        this.traces, this.layout, 
                        this.options)
                }});

I'm running out of ideas for this problem, does anyone know how I could stop this memory leak?

Thanks in advance.