如何使 GoogleChart 在 mat-grid 中灵活？

Question

I have google chart in the mat-grid list which I generated for element alignment on the page.But when I change the width of browser that chart isn't getting smaller as expected.There's overflow in the grid-tile and its not good.Usually all images,text etc. is being flex in the mat-grid but I didn't understand why this is not for googleChart.

Demo: https://stackblitz.com/edit/angular-pt2kha?file=app/grid-list-overview-example.html

You can see the behavior here:

Answer 1

You have to use percentages to set the size of the chart together with the dynamicResize atrribute. Set the height and width as a style with percentage and enable dynamicResizing.

Example:

 <google-chart #chart  
          style="border-style:solid;border-width:1px;width:90%;height:90%" 
          [title]="title"
          [type]="type"
          [data]="data"
          [columnNames]="columnNames"
          [options]="options"
          [dynamicResize]="true"              
          >

See the Stackblitz