Angular: How to initialize google-charts component with width and height in %

Question

I'm using the google-charts angular component and I'm passing it as a parameter [dynamic Resize]="dynamic Resize" to make the chart responsive. But the dynamic Resize just works if the width and height are with percentage and when the screen is resized, but I can't use width and height with percentage.

I tried to initialize the component with style="width: 100%; min-width: 500px; height: 500px;" but it's just applicated when the screen is resized... How can I fix that and initialize the component with his width and height in percentage values?

the chart when I join the tab: chart before resize the screen

the chart when I resize the screen: chart after resize the screen

component.html

<google-chart
    style="width: 100%; min-width: 500px; height: 500px;"
    [type]="type"
    [data]="data"
    [columns]="columnNames"
    [options]="options"
    [dynamicResize]="dynamicResize"
    [width]="width"
    [height]="height"
  ></google-chart>

component.ts

  // Chart configurations
  type: any = 'ColumnChart'
  data = [
    ['BRAZIL', 7153282.26, 6243680.89],
    ['CANADA', 3593833.71, 4759069.35],
    ['CHILE', 1363314.23, 1108712.94],
    ['MEXICO', 982280.00, 354999.48],
    ['PANAMA', 0.00, 0.00],
    ['UNITED STATES', 7592720.00, 5820093.76],
  ];
  columnNames = ['Region', 'Budget', 'Closed'];
  options = {
    vAxis: {
      format: 'short',
      gridlines: { color: '#CCCCCC', count: '4' },
      minorGridlines: { color: 'transparent' },
    },
    legend: {
      position: 'top',
      alignment: 'center'
    },
    chartArea:{ height:'80%', width: '70%' },
  };
  dynamicResize = true;
  // this it's not working
  width: any = '100%';
  height: any = '100%';