Google Charts API: Responsive Design

Question

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.

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