0

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%';
Henrique Fernandez
  • 21
  • 3
  • to resize a google chart, it must be re-drawn after its container is resized. see [this answer](https://stackoverflow.com/a/56443537/5090771) as an example, which also includes %'s for height and width. – WhiteHat Dec 29 '22 at 17:34
  • I think I didn't explain my problem well. The graph is resizing, my problem is when it initializes. If I set width with a numerical value, `dynamicResize` will not work and the graph will not be responsive, to work it needs a percentage value. But I can't set `width='100%'` because I get this error `A convenience property used to set the width of the graphic in pixels. This can also be set using options.width which, if it exists, will override this value. Type 'string' cannot be assigned to type 'number'.` if i set `options.width: '100%'` I get the same error... =( – Henrique Fernandez Dec 29 '22 at 18:39
  • I did as the example in the link that you sent, but I got the same comportment. When I joined the tab, the chart was without width. but when I resized the screen the width changed to normally – Henrique Fernandez Dec 29 '22 at 18:44
  • @WhiteHat I added pictures of my problem in the description, I think it will be easier to understand – Henrique Fernandez Dec 29 '22 at 18:49

0 Answers0