ngx-charts: Chart does not fit inside container when used in Angular Material Tab

@GO3LIN, @MRMokwa, @arunkumarv31, @jamesh38

I had the same issue with my chart extending beyond the border of my mat-card. However, I also have a chart in a mat-accordion panel, and although in both cases my data arrives asynchronously, the accordion panel resizes properly and contains the chart just fine.

I discovered that the display settings for the container in the mat-accordion panel uses flex, while mat-card is simply disply: block. After overriding the mat-card css to use the same flex settings, the card expands properly to fit the chart.

Note that you may need to place the css rule in a global styles file to avoid View Encapsulation problems, in addition to !important for each of your css settings.

Here is the css rule I copied from the mat-accordion panel container and applied directly to my mat-card element (you may only need the one display: flex !important; property):

.my-flex-mat-card {
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
}  

 <mat-card class="my-flex-mat-card">
     chart here
 </mat-card>

Works like a charm!

Just change the material-tab element to be lazy loaded.

You have to put your tab-content inside <mat-tab><ng-template matTabContent>{{yourcontent}}</ng-template></mat-tab>

EDIT: Using the AfterViewChecked hook caused a performance issue on my web app !!! You better use AfterViewInit lifecycle hook which is called only once !

Hello, I got the same problem using material cards. I fixed the issue by reloading the chart after the view was checked by angular. You have to implement the AfterViewInit interface from @angular/core and after that just do:

  ngAfterViewInit() {
    this.chartData = [...this.chartData];
  }

Enjoy !

For anyone who is looking to fit a ngx-charts-bar-horizontal in a material card content, here is a little trick

	<div style="width: 100%; height: 100px;" >
		<ngx-charts-bar-horizontal
			[scheme]="colorScheme"
			[results]="data"
			[gradient]="gradient"
			[xAxis]="showXAxis"
			[yAxis]="showYAxis"
			[legend]="showLegend"
			legendPosition="below"
			[showXAxisLabel]="showXAxisLabel"
			[showYAxisLabel]="showYAxisLabel"
			[xAxisLabel]="xAxisLabel"
			[showDataLabel]="showDataLabel">
		</ngx-charts-bar-horizontal>
	</div>
</mat-card-content>

the point is do not set the view attribute, instead define a div within mat-card-content and set its width and height to your desired value