title: Google Charts - Responsive Issue - Dynamically Resize
body: <p>I am trying to make my Google Column Material Chart responsive, but it seems a bit choppy to me and doesnt work well at all. Can anyone help me make this flow well</p>
  
  <p>The chart will only appear in that format when the page is loaded. It won’t dynamically resize when the browser window width is changed.</p>
  
  <p>JSFIDDLE
  <a href="https://jsfiddle.net/rbla/Le8g0sw0/8/" rel="noreferrer">https://jsfiddle.net/rbla/Le8g0sw0/8/</a></p>
  
  <p>HTML </p>
  
  <pre><code>&lt;div id="chart"&gt;
      &lt;div id="chart_div"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#chart {
     border:5px solid #AAA;
     width: 80%; 
     min-height: 450px;
  }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  
    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',
        },
        bars: 'vertical',
        vAxis: {format: 'decimal'},
        height: 400,
        colors: ['#1b9e77', '#d95f02', '#7570b3']
      };
  
      var chart = new google.charts.Bar(document.getElementById('chart_div'));
  
      chart.draw(data, google.charts.Bar.convertOptions(options));
  
  
  
    }
  
       // REFLOW
      $(window).resize(function(){
          drawChart();
      });
  </code></pre>