Make google chart responsive

Question

Im using google charts in a project but im having a hard time to make them responsive.

Iǘe seen other examples on responsive charts but I cant seem to get it to work in my case. All my charts gets rendered and after that their sizes do not change.

If someone can make this chart responsive id appreciate it. Thank you:

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Year');
    data.addColumn('number', 'Revenue');
    data.addColumn('number', 'Average Revenue');
    data.addRows([
      ['2004', 1000, 630],
      ['2005', 1170, 630],
      ['2006', 660, 630],
      ['2007', 1030, 630]
    ]);

    var options = {
      title: 'Revenue by Year',
      seriesType: "bars",
      series: {1: {type: "line"}},  
      vAxis: {title: 'Year',
              titleTextStyle:{color: 'red'}},
        colors:['red','black']
    };

    var chart = new google.visualization.ComboChart(document.getElementById('chart'));
    chart.draw(data, options);
}

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);

Fiddle for the chart: Fiddle

If it could take up a percentage width of a parent it would be great

Paul · Accepted Answer · 2020-07-28T13:20:29.863

18

The solution was already given online elsewhere.

You need to call your drawChart() function whenever the window is resized to get the desired behaviour. The website flopreynat.com exactly describes this problem and solution (codepen). It describes how this can be done using JQuery:

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

Using just Javascript, this answer on Stack Exchange by Sohnee describes how to trigger functions upon a resize event:

window.onresize = doALoadOfStuff;

function doALoadOfStuff() {
    //do a load of stuff
}

All credit to both authors of the links above.

edited Jul 28 '20 at 13:20

answered Dec 25 '16 at 09:31

Paul

887
6
22

Thank you Paul. I am using a similar approach now. I re-render the chart on window resize. But I hope to be able to achieve responsiveness without re-rendering. Here is an example that only seems to use css but i cant seem to recreate it on my own chart: http://jsfiddle.net/toddlevy/pyAz5/ – fake acc Dec 25 '16 at 09:35
That example appears to use the throttledresize event to redraw it, not just CSS. – Paul Dec 25 '16 at 09:47
Oh! I did not realize that...thank you Paul for enlightening me. I guess using js is the only way then...Considering that your answer actually makes the charts responsive, iĺl mark it as accepted. – fake acc Dec 25 '16 at 09:55

score 2 · Answer 2 · edited Mar 05 '20 at 16:36

2

Add width_units to your option block:

var options = {
    width: 80,
    width_units: '%'
}

edited Mar 05 '20 at 16:36

Adrian Mole

49,934
160
51
83

answered Mar 05 '20 at 15:41

user1656086

49
3

It may be useful to explain how adding this width option would make the chart responsive. – Geekfish Mar 05 '20 at 16:13
1

I can't believe this had a negative vote! It's so simple answer and it works! – user1589375 Feb 08 '22 at 13:52
This works on mobile, but the chart stays small on a wider screen. Not responsive. – tomb Nov 07 '22 at 17:03

score 0 · Answer 3 · answered Nov 07 '22 at 17:37

I created a class chart, and used the window resize event like the accepted answer.

css:

.chart {
          width: 100%; 
          min-height: 500px;
        }

js:

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

html:

<div id="barchart" class="chart"></div>

score -1 · Answer 4 · answered Jun 22 '22 at 10:18

-1

Or simply use:

var options = {
  responsive: true,
}

answered Jun 22 '22 at 10:18

user19390189

1

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 22 '22 at 17:19

Make google chart responsive

4 Answers4

Linked