Search code examples
javascripthtmlchartsgoogle-visualizationdashboard

Google Visualization not using full space (ever)

This is a persistent aggravation when I'm creating visualization with the Google Visualization library:

enter image description here

There's a good 75 pixels at least on the left and right of this graph, plus another 30-40 on the top and bottom. There's no reason the pie itself can't be larger and there's no reason for the legend on the right to be wrapping like that when I supplied plenty of space.

How can I fix this?

Solution

  • PieChart is the worst for sizing

    but you can make minor adjustments using the option for --> chartArea

    see following working snippets...

    with adjustments

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['cateory', 'value'],
    ['1 - snail mail', 100],
    ['2 - de-elevatd', 200],
    ['3 - default', 900],
    ['4 high', 100],
  ]);

  var chart = new google.visualization.PieChart(document.getElementById('chart'));
  chart.draw(data, {
    chartArea: {
      height: '100%',
      width: '100%',
      // prevent highlight color of slice from being cutoff on hover
      top: 8,
      bottom: 8
    }
  });
}
    <script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

    without adjustments

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['cateory', 'value'],
    ['1 - snail mail', 100],
    ['2 - de-elevatd', 200],
    ['3 - default', 900],
    ['4 high', 100],
  ]);

  var chart = new google.visualization.PieChart(document.getElementById('chart'));
  chart.draw(data);
}
    <script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>