asked on

How to make google charts responsive

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?

ASKER CERTIFIED SOLUTION

Leonidas Dosas

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Crazy Horse

ASKER

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>