highcharts not loading in tabs

Question

I have multiple tabs view with a component rendering in each one of them. Here is the code for that:

<mat-tab-group>
                    <mat-tab *ngFor="let g of goals; index as i">
                        <ng-template mat-tab-label>{{g.name}}</ng-template>
                        <div class="row">
                            <app-summary [goal]="g"></app-summary>
                        </div>
                        <div class="row">
                            <mat-table #table [dataSource]="dataSource[i]">
                                ## some table content here
                            </mat-table>
                        </div>
                    </mat-tab>
                </mat-tab-group>

Here is what app-summary looks like:

<div fxLayout="column" fxLayoutGap="20px" style="padding: 20px; width: 1100px;">
  <div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start start">
    <div fxFlex="55">
      <mat-card class="summary-card">
        <mat-card-content>
          <chart [options]="wealthOptions"></chart>
        </mat-card-content>
      </mat-card>
    </div>
    <div fxFlex="25">
      <mat-card class="summary-card">
        <mat-card-content>
          <chart [options]="pieProbOptions"></chart>
        </mat-card-content>
      </mat-card>
    </div>
  </div>
</div>

The <chart> contains highchart views. However, the charts are available only for the first tab. The component is loaded and rendered for each tab.

Is there something missing here or needs to be done is certain way?

Answer 1

It is because, when you initialize the highcharts, except first tab, others are not in DOM, and therefore are not available to be initialized.

You will have to listen for some tab-change event, and then reinitialize the highcharts after the tab is rendered.

Answer 2

I know it's late, but I am sure it will help someone because it took me forever to find this in an offhanded comment. One way to load highcharts in tabs is to lazy load the tab with the angular attribute <ng-template matTabContent> like so

<mat-tab-group class="secondary-tab-group has-header"
               [dynamicHeight]="true"
               mat-stretch-tabs>
  <mat-tab label="first">
    <child-component></child-component>
  </mat-tab>

  <mat-tab label="second">
    <ng-template matTabContent>
      <highcharts-child-component [list]="dataList"></highcharts-child-component>
    </ng-template>
  </mat-tab>

</mat-tab-group>

You can read the angular tabs documentation here with a more basic example of lazy loading.

You don't need a parent/child component structure I have and possibly do something like this

<mat-tab-group class="secondary-tab-group has-header"
               [dynamicHeight]="true"
               mat-stretch-tabs>
  <mat-tab label="first">
    hello world
  </mat-tab>

  <mat-tab label="second">
    <ng-template matTabContent>
      <div>
        <chart (load)="saveInstance($event.context)" [optoins]="highchartOptions"></chart>
      </div>
    </ng-template>
  </mat-tab>

</mat-tab-group>