Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 <div> on which i'm forming piechart.

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

Here is a fiddle of my code.

like image 826
Dilip G Avatar asked Oct 26 '16 07:10

Dilip G


People also ask

How do I use react Google charts?

First, we import react-google-charts and get the Chart property. Next, we create a data variable that will house the data to be displayed on the pie chart. The pie chart is highly customizable; for a more complex chart, you only need to update the data to the array.


1 Answers

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

like image 169
Mistalis Avatar answered Sep 17 '22 23:09

Mistalis