Web GL not supported issue

[ssalveMobiltex]

Hi all, I am facing web gl not supported issue on Production build for plotly
Angular Plotly version - "angular-plotly.js": "^5.1.0",
"plotly.js-dist": "^2.24.2",
"plotly.js-dist-min": "^2.24.2",

I am using the latest Chrome version with hardware acceleration on.

[andrefarzat]

Hello @ssalveMobiltex . Quite weird this. Does this happen with another browser ? (e.g.: Firefox, edge or safari ?)

[ssalveMobiltex]

Yes @andrefarzat I do get it on different browsers as well

[andrefarzat]

I could not replicate this issue. Could you show me the code you're using to import the angular-plotly.js module and an example of graph data ?

[ssalveMobiltex]

eg.
Step 1. Create a shared-plotly.module.ts
Code:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { PlotlyViaWindowModule } from 'angular-plotly.js';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    PlotlyViaWindowModule
  ],
  exports: [
    CommonModule,
    PlotlyViaWindowModule
  ]
})

Step 2: Import the shared module in your lazy loaded module

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { SharedPlotlyModule} from '../../shared-plotly.module';
import { SharedModule } from '../../shared.module';
import { GraphRoutingModule } from './graph-routing.module';
import { GraphWrapperComponent } from './reading-graph-wrapper/graph-wrapper.component';
import { GraphComponent } from './graph.component';

@NgModule({
  declarations: [
    GraphComponent,
    GraphWrapperComponent
  ],
  imports: [
    CommonModule,
    GraphRoutingModule,
    SharedModule,
    SharedPlotlyModule
  ]
})
export class GraphModule { }

Step 3: Code in Component

<div>
    <plotly-plot class='chart' [data]="graph.data" [layout]="graph.layout" [config]="graph.config">
    </plotly-plot>
</div>

TS:

graph;
  graphData = [];
  createGraph(result) {
    const X = [], Y = [];
    let fData, pData = {};
    if (Condition) {
      for (let index = 0; index < result.length; index++) {
        X.push(result.x),
          Y.push(result.y)
      }
      fData = {
        type: "scattergl",
        mode: "line",
        x: X,
        y: Y,
      }
      this.graphData.push(fData);
    }
    else if (Condition) {
        for (let index = 0; index < result.length; index++) {
        X.push(result.x),
          Y.push(result.y)
      }
      pData = {
        type: "scattergl",
        mode: "line",
        yaxis: 'y2',
        x: X,
        y: Y,
     
      }
      this.graphData.push(pData);
    }
    const layout = {
      title: 'Graph',
      yaxis: {domain: [0, 0.40], title: 'F'},
      yaxis2: {domain: [0.50,1], title: 'P'},
      showlegend: true,
      legend: { orientation: "h",
                traceorder: 'reversed',
                x: 0,
                y: -0.2
      },
      height: 700
    }
    this.graph = {
      data: this.graphData,
      layout: layout,
      config: { responsive: true, displaylogo: false }
    };
  }

[andrefarzat]

I can't see anything wrong with your code.
Let's see if things go wrongly with plotly.js itself. I found an aleatory 3d graph. Please, open it and check if it's working properly in your browser: https://codepen.io/plotly/pen/MaxrwW

Secondly, please fork this codepen and try to make it work within your data. I am trying to confirm that plotly.js is working correctly before attacking angular-plotly.js, for it's just a wrapper for plotly.js