How to make Google piechart react?

Question

I have a Google pie chart that works fine but doesn't respond, how to make it responsive?

---

Here is the <div> on which I configure the piechart.

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

Below is the fiddle code of my code.

Answer 1

Here is the solution using throttledresize.js .

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

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

---

2) The style of 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. Customize 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); }); 

JSFiddle Demo