CODEWITHSUNDEEP
javascriptcssresponsive-designgoogle-visualization
mushroom
mushroom

Reputation: 1945

Google Charts API: Responsive Design

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.

Upvotes: 3

Views: 12544

Answers (1)

Sid Vishnoi
Sid Vishnoi

Reputation: 1318

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

Upvotes: 5

Related Questions