Can't show surface chart with Plotly, Angular 12

Question

im tryng to show a 3d model with Plotly (https://github.com/plotly/angular-plotly.js/blob/master/README.md), but the chart doesn't appear.

componente.component.ts

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

@Component({
  selector: 'app-componente',
  templateUrl: './componente.component.html',
  styleUrls: ['./componente.component.css']
})
export class ComponenteComponent{
  
  getData() {
    var arr = [];
    for(let i=0;i<25;i++)
        arr.push(Array(25).fill(undefined).map(() => Math.random()))
    console.log(arr);
    return arr;
  } 
  data: any[] = this.getData();

  public graph = {
    z: this.data,
    type: 'surface',
    layout: {autosize: true, title: 'Modelo 3d'}
  };

}

componente.component.html

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

This is what is showing now

And should be something like this:

I've trying to make it work on angular all day but im not good enough :/ any help will be amazing :D

Answer 1

I solve it this way:

import * as PlotlyJS from 'plotly.js-dist-min';

getData() {
    var arr = [];
    for(let i=0;i<40;i++)
        arr.push(Array(40).fill(undefined).map(() => Math.random() * 256))
    //console.log(arr);
    arr.push({type: 'scatter3d'});
    return arr;
  }

testButton () {
    this.getModelo3d();
    PlotlyJS.newPlot('chart', [{
      z: this.getData(),
      type: 'surface'
    }]);
  }

in html

<div id="chart"></div>