google visualization chart, size in percentage

Question

How do you set the size of a google chart in percentage : I have this in the html:

<div id="chart_div" width="90%" height="20%"></div>

and no width nor height in the options in the js.

But the chart size doesn't adapt to the viewport.

Answer 1

First, use styles to set your dimensions, not attributes:

<div id="chart_div" style="width: 90%; height: 20%;"></div>

The chart will draw to the size of the div by default, but the charts are not responsive. You have to hook a "resize" event handler to the window (or other element if you are resizing within a window) that redraws the chart:

function resizeChart () {
    chart.draw(data, options);
}
if (document.addEventListener) {
    window.addEventListener('resize', resizeChart);
}
else if (document.attachEvent) {
    window.attachEvent('onresize', resizeChart);
}
else {
    window.resize = resizeChart;
}