Dilip G Dilip G - 1 year ago 81
CSS Question

How to make Google piechart responsive

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

Here is a
on which i'm forming piechart.

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

Here is a fiddle of my code.

Answer Source

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>

2) Style these divs

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

#chart_div {
    position: absolute;
    top: 0;
    left: 0;

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download