Angular Google Charts - Auto Height

Question

im using this plugin.

https://github.com/angular-google-chart/angular-google-chart

And i need help to define Auto Height with type BarChart. When get too big, I use scroll.

Thank you very much!

Answer 1

the chart will automatically fill the containing <div>

use css to style the <div>

and lose any specific height or width config options on the chart

on resize, the chart will need to be redrawn

although the following example is not angular, the chart will behave the same

google.charts.load('current', {
  callback: function () {
    var dataTable = new google.visualization.DataTable({
      cols: [
        {label: 'Month', type: 'string'},
        {label: 'Amount', type: 'number'},
        {role: 'style', type: 'string'}
      ],
      rows: [
        {c:[{v: 'April'}, {v: 12}, {v: '#c62828'}]},
        {c:[{v: 'May'}, {v: 10}, {v: '#ad1457'}]},
        {c:[{v: 'June'}, {v: 8}, {v: '#6a1b9a'}]},
        {c:[{v: 'July'}, {v: 6}, {v: '#4527a0'}]},
        {c:[{v: 'August'}, {v: 4}, {v: '#283593'}]},
        {c:[{v: 'September'}, {v: 2}, {v: '#1565c0'}]},
        {c:[{v: 'October'}, {v: 2}, {v: '#00838f'}]},
        {c:[{v: 'November'}, {v: 4}, {v: '#00695c'}]},
        {c:[{v: 'December'}, {v: 6}, {v: '#2e7d32'}]},
        {c:[{v: 'January'}, {v: 8}, {v: '#9e9d24'}]},
        {c:[{v: 'February'}, {v: 10}, {v: '#f9a825'}]},
        {c:[{v: 'March'}, {v: 12}, {v: '#d84315'}]}
      ]
    });

    var options = {
      backgroundColor: 'transparent',
      legend: 'none',
      theme: 'maximized'
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(dataTable, options);

    $(window).resize(function() {
      chart.draw(dataTable, options);
    });
  },
  packages:['corechart']
});

body {
  margin: 0;
}

.header {
  background-color: red;
  height: 40px;
}

.mainBody {
  background-color: yellow;
  bottom: 20px;
  position: absolute;
  top: 40px;
  width: 100%;
}

.footer {
  background-color: blue;
  bottom: 0;
  height: 20px;
  position: absolute;
  width: 100%;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div class="header" >&nbsp;</div>
<div class="mainBody" id="chart_div"></div>
<div class="footer">&nbsp;</div>