I used the npm package for google charts, calledangular-google-charts, to display charts in my Angular app.

Setting the width and height as percentages does not make the graph responsive. Moreover, wrapping the chart element in a div and making that div responsive also doesn't work.

Here's a hack I developed to make it work.

<!--mycomponent.component.html file --><!-- This is the container element of your chart--><div (window:resize) = "resetWindowSize($event)">    <google-chart>    ....    </google-chart></div>

This is an event listener that will listen for changes to window size, and on an event capture, will call the resetWindowSize() function.

//mycomponent.component.ts file//setting state variables for chart parameterswidth = document.documentElement.ClientWidth;height = document.documentElement.ClientHeight;....resetWindowSize(event){    //Reset the width and height based on current window size    this.width = event.target.innerWidth;    this.height = event.target.innerHeight;    makeGraph();}

Thus, on changing window size, the resetWindowSize function is triggered, and sets the width and height based on the current window size.

Note that you might have to re-call the function that makes the graph. That's the way it works for me.

Cheers! Happy Coding