DEV Community

Dushyant Pathak
Dushyant Pathak

Posted on

Making Google Charts responsive

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>
Enter fullscreen mode Exit fullscreen mode

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();
}

Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
lvanerstrom profile image
lvanerstrom

Where are you using the height and width? Can you post the entire code?

Collapse
 
lfrz74 profile image
Fernando Rivera

Thx @dkp1903 it works beautifully

Collapse
 
agajpal123 profile image
AGajpal123

Awesome :)