Sizing Google charts to fill div width and height

Question

Just getting started in Google charts and I'm trying to create a line graph that fills the available space. Seems like the charts are locked in a certain aspect ratio though as no matter what I change the height and width properties to for the chart and chart div element, the result doesn't match my dimensions.

Are Google charts fixed that way or is there an override or aspect ratio option that I am missing?

You can find an example here:

http://www.walkingcarpet.net/graphs/unemployment-rate/

Thanks!

Solution 1

in addition to setting the width option,

set chartArea.width to ensure the chart utilizes the available space

also, when the window is resized, the chart needs to be redrawn

see following working snippet...

google.charts.load('current', {
  callback: function () {
    drawChart();
    $(window).resize(drawChart);
  },
  packages:['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y'],
    [0, 0],
    [1, 1],
    [2, 3],
    [3, 7],
    [4, 15],
    [5, 31]
  ]);

  var options = {
    chartArea: {
      // leave room for y-axis labels
      width: '94%'
    },
    legend: {
      position: 'top'
    },
    width: '100%'
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.LineChart(container);
  chart.draw(data, options);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

---

EDIT

among others, chartArea also has a property for left

instead of using chartArea.width: '94%'

try setting an absolute left

see following working snippet...

google.charts.load('current', {
  callback: function () {
    drawChart();
    $(window).resize(drawChart);
  },
  packages:['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y'],
    [0, 0],
    [1, 1],
    [2, 3],
    [3, 7],
    [4, 15],
    [5, 31]
  ]);

  var options = {
    chartArea: {
      left: 40,
      width: '100%'
    },
    legend: {
      position: 'top'
    },
    width: '100%'
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.LineChart(container);
  chart.draw(data, options);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Solution 2

This CodePen shows an example of making Google Charts responsive. Specifically, the charts are redrawn on resize:

$(window).resize(function(){
  drawChart1();
  drawChart2();
});

Comments

[Tom]

thanks, I'm getting there. Seems like I have to set the height and width of the div element as well. When I do that the chart expands but using 100% and 94% hides the axis labels as you can see as I updated that link. Wondering if that's a limitation of the charts or something in my CSS?

[Tom]

I think that did it. If you check the example it takes up the space. Have to define the div width and height but it's there.

[Aurelien B]

Not working for height though. The chart is clipped unless one manually set the height in advance which is quite not a solid option.

[WhiteHat]

you can set height & chartArea.height to '100%' -- then set chartArea.bottom & chartArea.top to absolute values to allow room for chart elements in those areas. here is an example --> Google Chart too narrow

[Winston]

Is this responsive too?

[WhiteHat]

to make the google chart responsive, it must be re-drawn on the 'resize' event. see this example --> Google Charts - Responsive Issue - Dynamically Resize

[Corrl]

Unfortunately the chartArea option doen't seem to be available on all charts, for example it looks it has no effect on a 'gantt chart' (where it's also not mentioned in the docs) - might be worth pointing out that here the ['corechart'] package is used and others google chart packages (like ['gantt']) might behave differently