Avatar of Crazy Horse
Crazy Horse
Flag for South Africa 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?
JavaScript

Avatar of undefined
Last Comment
Crazy Horse

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Leonidas Dosas

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
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>

Open in new window

SOLUTION
Leonidas Dosas

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Crazy Horse

ASKER
Ah, that worked! :)
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23