Google Chart not taking up 100% of space

Question

Firstly, a big shout out to this example: https://www.c-sharpcorner.com/UploadFile/ca9151/google-charts-api-using-database-in-Asp-Net/ If you want a simple walk-through of building a Google Chart, then that is perfect.

In saying that ... both in that example, and on the one in my project ... I can't get the chart to start at the left of the designated section. it keeps indenting. It's worse when I hide the axis labels as the space just becomes larger due to the lack of words.

Does anyone know how to make them take up 100% of the width? (in the image, i want the chart to start at the red line and go all the way to the other side of the div)

Thanks in advance.

Megohm

Answer 1

by default, the chart will not fill the width and height of the container.

use chartArea options to stretch the chart to the edges of the container,
use top, left, bottom, right to leave room for the axis labels, title, etc.

chartArea: {
  height: '100%',
  width: '100%',
  top: 48,
  left: 48,
  right: 16,
  bottom: 48
},
height: '100%',
width: '100%',

redraw the chart on 'resize' to make it responsive,
see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Average'],
    ['2019/01', 1, 2, 7, 3],
    ['2019/02', 5, 1, 3, 3.5],
    ['2019/03', 4, 3, 9, 6],
    ['2019/04', 1, 3, 8, 5],
    ['2019/05', 2, 6, 8, 4],
    ['2019/06', 3, 1, 9, 3],
  ]);

  var options = {
    chartArea: {
      height: '100%',
      width: '100%',
      top: 48,
      left: 48,
      right: 16,
      bottom: 48
    },
    height: '100%',
    width: '100%',

    title : 'Monthly Coffee Production by Country',
    vAxis: {title: 'Cups'},
    hAxis: {title: 'Month'},
    seriesType: 'bars',
    series: {3: {type: 'area'}}
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart'));

  drawChart();
  window.addEventListener('resize', drawChart, false);
  function drawChart() {
    chart.draw(data, options);
  }
});

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

#chart {
  height: 100%;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

Trustbuster

Works perfectly with the timeline chart too. – Corrales