I just added a chart from Google Charts API into a webapp I'm working on. Just for some context, my webapp is built on AngularJS with Bootstrap. The charts are inserted using the angular-google-chart module.

How do I make the chart display responsive? What I'd like to do is to keep the chart full width, and based on that sized automatically with a proper height. I can't seem to get that working.

I have tried making width: 100%; height: 500px; but it displays whitespace on smaller widths.

Any suggestions greatly appreciated.

I just added a chart from Google Charts API into a webapp I'm working on. Just for some context, my webapp is built on AngularJS with Bootstrap. The charts are inserted using the angular-google-chart module.

How do I make the chart display responsive? What I'd like to do is to keep the chart full width, and based on that sized automatically with a proper height. I can't seem to get that working.

I have tried making width: 100%; height: 500px; but it displays whitespace on smaller widths.

Any suggestions greatly appreciated.

• javascript
• css
• responsive-design
• google-visualization

• possible duplicate of Make Google Chart Gauge responsive – asgallant Commented May 24, 2014 at 16:08
• @asgallant: Definitely not a duplicate. Please read the question and context before marking it as such. This is with regard to angular-google-chart, an AngularJS module. – mushroom Commented May 24, 2014 at 18:01
• The answer is the same, regardless of whether it is an angular module or not: you have to redraw the chart from a resize event handler. – asgallant Commented May 25, 2014 at 1:06

1 Answer 1

This thing works for me fine:

1. Add a wrapper (div) on the main chart div and add following css

   min-height:500px;height: 100%;width: 100%;margin:auto;background:#fff;text-align:center
   

2. Add the following CSS to the chart div:

   min-height:500px;height: 100%;width: 100%;margin:auto;background:#fff;text-align:center
   

3. Add a simple window resize function

   $(window).resize(function(){
       drawChart();
   });