Making Google Charts responsive

#googlecharts #angular #responsive #eventlistener

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