How to make google charts responsive

Black Sulfur
Black Sulfur used Ask the Experts™
on
I am using the column chart:

https://developers.google.com/chart/interactive/docs/gallery/columnchart

and have noticed that it isn't responsive, displaying horribly on mobile and small screens. Any ideas on how to make it responsive?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Distinguished Expert 2017
Commented:
Try to put inside the window.resize function the functions that creates charts:
JQuery
$(window).resize(function(){
  drawChart();
  
});

Open in new window

Author

Commented:
Thanks,

I did already try that but it didn't work. Maybe I am just not doing it properly. Here is my div:

<div class="col-md-12 col-lg-6 col-sm-12 col-xs-12">
	<div class="white-box">
		<h3 class="box-title">Target VS Actual</h3>
		<div id="columnchart_material" style="width: 500px; height: 500px;"></div>
	</div>
</div>

Open in new window


And the chart:


 
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2014', 1000, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350]
        ]);

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          }
        };

        var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

        chart.draw(data, options);
      }
$(window).resize(function(){
        drawChart();
        });
    </script>

Open in new window

Distinguished Expert 2017
Commented:
At this element erase the style height and width properties:
From:
<div id="columnchart_material" style="width: 500px; height: 500px;"></div>

Open in new window


To:
<div id="columnchart_material"></div>

Open in new window

Author

Commented:
Ah, that worked! :)

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial