javascript - Google Charts API: Responsive Design - Stack Overflow

admin管理员组

文章数量:1395902

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

Share Improve this question Follow asked May 24, 2014 at 15:38 mushroommushroom 1,94533 gold badges1616 silver badges3333 bronze badges 3

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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

本文标签： javascriptGoogle Charts API Responsive DesignStack Overflow