I used the npm package for google charts, called angular-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 parameters
width = 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
Top comments (3)
Where are you using the height and width? Can you post the entire code?
Thx @dkp1903 it works beautifully
Awesome :)