ngx-echart not visiblle when placed inside mat-grid-tile

Question

I have a Angular application where mat-grid-list is used as 2:1 grid structure. I have also used Nightingale Chart from ngx-echart. Now when I'm placing chart div into second mat-grid-tile the chart becomes invisible. Below is my code snippet.

app.component.html

<mat-grid-list cols="2" rowHeight="2:1">
  <mat-grid-tile>
    <mat-list role="list">
      <mat-list-item role="listitem">Item 1 <mat-chip>2</mat-chip></mat-list-item>
      <mat-list-item role="listitem">Item 2 <mat-chip>2</mat-chip></mat-list-item>
      <mat-list-item role="listitem">Item 3 <mat-chip>2</mat-chip></mat-list-item>
    </mat-list>
  </mat-grid-tile>
  <mat-grid-tile role="none">
    <div echarts [options]="myChartOptions" class="my-chart"></div>
  </mat-grid-tile>
</mat-grid-list>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MatGridListModule } from '@angular/material/grid-list';
import { MatListModule } from '@angular/material/list';
import { MatChipsModule } from '@angular/material/chips';

import { NgxEchartsModule } from 'ngx-echarts';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    
    MatGridListModule,
    MatListModule,
    MatChipsModule,

    NgxEchartsModule.forRoot({
      echarts: () => import('echarts')
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

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

import type { EChartsOption } from 'echarts';
import { ThemeOption } from 'ngx-echarts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-app';
    myChartOptions: EChartsOption = {
        title: {
            left: '50%',
            text: 'My Team',
            subtext: 'Team Members',
            textAlign: 'center',
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        calculable: true,
        series: [
            {
                name: 'area',
                type: 'pie',
                radius: [30, 110],
                roseType: 'area',
                data: [
                    { value: 3, name: 'Manager' },
                    { value: 5, name: 'Associate Manager' },
                    { value: 10, name: 'Team Leader' },
                    { value: 25, name: 'Developer' },
                    { value: 20, name: 'Designer' },
                    { value: 10, name: 'Tester' }
                ]
            }
        ]
    };
}

Not sure what is getting wrong here. Please suggest.