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!

Groggery

Answer 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>

Continuo

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? – Groggery

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. – Groggery

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

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 – Continuo

Is this responsive too? – Kisung

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

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 – Diplomat

Answer 2

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

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

Varese

Answer 3

After Google Chart Updates as of Sep 2021, the most quick fix on loading dynamic charts take the full width of its container is to load it with delay.

setTimeout(function() {
  chart.draw(view, options);
  }, 2000
);

This problem happens when on your page load and your container is responsive and does not have a definite width yet, Google Chart use 400 width as default when it detected the parent container width returns 'NaN'.

But Google chart works fine if you load the chart on click were the elements are properly loaded.

Still the chart width will be fixed on load, and won't automatically resize. You can fix that part with CSS

Pancho

Answer 4

Landed in a similar situation, in which the available height for the graph (in the bounding container) did not seem to be fully used.

https://developers.google.com/chart/interactive/docs/gallery/linechart contains some pointers though. Look at the vAxis.viewWindowMode, vAxis.viewWindow.max and vAxis.viewWindow.min properties, and especially the "maximized" viewWindowMode:

Specifies how to scale the vertical axis to render the values within the chart area. The following string values are supported: [...]
"maximized" - Scale the vertical values so that the maximum and minimum data values touch the top and bottom of the chart area. This will cause vaxis.viewWindow.min and vaxis.viewWindow.max to be ignored."[...]\

If you're not using the viewWindow, you should also look at the vAxis.ticks property, as "The viewWindow will be automatically expanded to include the min and max ticks unless you specify a viewWindow.min or viewWindow.max to override."

Negate