How to make Google piechart responsive?

Question

I have a Google pie chart which works fine but it is not responsive, how to make it responsive?

---

Here is a <div> on which i'm forming piechart.

<div id="piechart" style="width: 900px; height: 500px;"></div>

Here is a fiddle of my code.

Tonie

Top google response for "Google Chart Responsive" codepen.io/flopreynat/pen/BfLkA – Unfolded

@DanielShillcock, but it is for bar chart – Tonie

Answer 1

Here is a solution, using throttledresize.js.

1) Put your div id="chart_div" in a parent div

<div id="chart_wrap">
    <div id="chart_div"></div>
</div>

---

2) Style these divs

#chart_wrap {
    position: relative;
    padding-bottom: 100%;
    height: 0;
    overflow:hidden;
}

#chart_div {
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
}

Note: Adapt the CSS to your needs.

---

3) Add this code at the end of your JS

$(window).on("throttledresize", function (event) {
    var options = {
        width: '100%',
        height: '100%'
    };

    var data = google.visualization.arrayToDataTable([]);
    drawChart(data, options);
});

Demo on JSFiddle

Poteat

Answer 2

Easiest method in the world:

var options = {'width':'auto', 'height':'auto'};

Eb