Highcharts Not Loading In Tabs
I have multiple tabs view with a component rendering in each one of them. Here is the code for that:
Solution 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.
Solution 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-groupclass="secondary-tab-group has-header"
[dynamicHeight]="true"mat-stretch-tabs><mat-tablabel="first"><child-component></child-component></mat-tab><mat-tablabel="second"><ng-templatematTabContent><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-groupclass="secondary-tab-group has-header"
[dynamicHeight]="true"mat-stretch-tabs><mat-tablabel="first">
hello world
</mat-tab><mat-tablabel="second"><ng-templatematTabContent><div><chart (load)="saveInstance($event.context)" [optoins]="highchartOptions"></chart></div></ng-template></mat-tab></mat-tab-group>
Post a Comment for "Highcharts Not Loading In Tabs"