How to make the donut google chart responsive inside div?

user_10316591 0
Viewed 53

I have three card in horizontal with (33.3%) width each.I want to add this donut graph in my first card but when I add then the graph has no responsive property.How can we make responsive?

              google.charts.load("current", {packages:["corechart"]});
              google.charts.setOnLoadCallback(drawChart);
              function drawChart() {
                var data = google.visualization.arrayToDataTable([
                  ['Task', 'Hours per Day'],
                  ['Work',     11],
                  ['Eat',      2],
                  ['Commute',  2],
                  ['Watch TV', 2],
                  ['Sleep',    7]
                ]);
        
                var options = {
                  title: 'My Daily Activities',
                  pieHole: 0.4,
                };
        
                var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
                chart.draw(data, options);
              }
        
     <html>
          <head>
            <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
           
          </head>
          <body>
            <div id="donutchart" style="width: 900px; height: 500px;"></div>
          </body>
        </html>

google-visualization charts css html javascript
1 Answers

you have to re-draw the chart anytime there is a resize...

window.addEventListener('resize', function () {
  chart.draw(data, options);
});
user_50907710
Related