Angular Echarts not rendering in mat-side-nav

I have an application that retrieves data from a backend process and then creates several echart graphs dynamically on the front end. I never know how many charts will be created, so I can't set static elements for the charts. If I create a div and use *ngFor for the charts in the main page, the charts render just fine. However, I would like to open a side nav and have the charts render there. In the side nav, I get the frames for the charts and the titles, etc, but there is no graph rendering in the side nav. I have tried passing the data to the side nav via a service and creating the options and charts in afterViewInit and also building the charts in the main program and passing all the chart data in via a service. I get the same results either way. The template for the charts is:

<div style="position: absolute; right: 0px; top: 60px; overflow-y: auto; z-index: 995;max-height:90%; min-height:23vh; width: 98%;">

<div class="graphwindow" >
<div *ngFor="let p of qualprofs" style="border:solid 1px; " >

<p class="graph-heading" style="padding-left:5px;">
<span style="font-size: 9px;">
{{p.shortTitle}}
</span>
<span style="float:right;z-index:999;">

<nb-icon icon="arrow-ios-downward-outline" ></nb-icon>
</span>
<span style="float: right;z-index:999;" >
<nb-icon icon="expand-outline" ></nb-icon>
<nb-icon icon="arrow-ios-upward-outline" ></nb-icon>
</span>

</p>
<div style="height:100%;border: solid 1px; width: 100%; font-size:9px;" >
<div echarts [options]="p.echtdata" (chartMouseMove)="profileMousemove($event,p)" class="demo-chart" style="height:250px;">
</div>
</div>

</div>

</div>


And the corresponding TS file is:

import{ GlobalVars } from '../../common/globals';
import {Router} from "@angular/router";
import { ApiService } from '../../api.service';
import { Map,LatLng,icon,LayerGroup, marker } from 'leaflet';
import { MapService } from 'src/app/map.service';
import { ProfileService } from 'src/app/profile.service';
import type { EChartsOption } from 'echarts';
import * as echarts from 'echarts';

@Component({
selector: 'app-profiles',
templateUrl: './profiles.component.html',
styleUrl: './profiles.component.scss'
})
export class ProfilesComponent implements AfterViewInit{
map: Map;

qualprofs: any;
profMouseObj:any;


constructor(

public apiService: ApiService,
private router: Router,
public profileService: ProfileService) {

}


ngAfterViewInit(){

this.profileService.data$.subscribe(data => {
this.qualprofs = data;
})

}

ngOnDestroy(): void {
this.qualprofs = [];
}

}


I'm sharing the data through a simple service called ProfileService:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
providedIn: 'root'
})
export class ProfileService {
private dataSubject = new BehaviorSubject<any>(null);
data$ = this.dataSubject.asObservable();

setData(data: any) {
this.dataSubject.next(data);
}
}


If I add the html code from the template in the main viewing area (not in the side-nav) Everything displays fine. I'm simply trying to pass the chart data array to the side-nav and then draw the charts there instead, but I can't figure out why the graphs won't render. Attached is a pic of the side-nav after the data is returned followed by just throwing the div on the main application.

side-nav-render

This is in the main app:

main app render

Continue reading...