Chart does not fit inside container when used in Angular Material Tab

I’m submitting a …

[X] bug report
[ ] feature request
[ ] support request

Current behavior When inside a Angular Material Tab Component the Chart does not correctly fit inside the container. It does not matter if the size of the container is set to a fixed dimension (direct pixel values) or relavive (percentage).

Expected behavior The Chart should resize itself to the container

Reproduction of the problem https://plnkr.co/edit/m7V3cOa95tVx9jKiLxSR?p=preview

What is the motivation / use case for changing the behavior? Using the ngx-charts inside an angular-material app with tabs

• ngx-charts version: 6.0.2

• Angular version: 4.3.6

• Browser: Chrome, Firefox, Edge (all I tested)

• Language: TypeScript

This issue is similar but I think not equal to #474. It maybe the same cause. Since as soon as you resize the window, the chart fixes its size.

[andreisrob]

@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!

[davidblumer]

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>