DEV Community

Dushyant Pathak
Dushyant Pathak

Posted on

6 2

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

Image of AssemblyAI tool

Challenge Submission: SpeechCraft - AI-Powered Speech Analysis for Better Communication

SpeechCraft is an advanced real-time speech analytics platform that transforms spoken words into actionable insights. Using cutting-edge AI technology from AssemblyAI, it provides instant transcription while analyzing multiple dimensions of speech performance.

Read full post

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 :)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay