Remove space between Google Charts in a table

Question

I have multiple pie charts that are in a table. How can i remove the space between them?

I tried a lot if different options (making the div element smaller, this: Remove padding or margins from Google Charts, or this: remove space between two td elements in a table), but nothing worked.

This is my code: JS

function drawPieCharts(countChoices, name) {
        var rows = [];
        for (var property in countChoices) {
            if (countChoices.hasOwnProperty(property)) {
                rows.push([property, countChoices[property]]);
            }
        }


        var datatable = new google.visualization.DataTable();
        datatable.addColumn('string', 'Type');
        datatable.addColumn('number', 'Quantity');
        datatable.addRows(rows);
        var options = {
            title: String(name),
            is3D: 'true',
        };
        var chart = new google.visualization.PieChart(document.getElementById(String(name)));
        chart.draw(datatable, options);
    }

and the html code

</head>
  <body>
    <!--Table and divs that hold the charts-->
    <table width="50%">
      <tr>
        <td><div id="1" style="width:700px;height:500px;"></div></td>
        <td><div id="2" style="width:700px;height:500px;"></div></td>
      </tr>
      <tr>
        <td><div id="3" style="width:700px;height:500px;"></div></td>
        <td><div id="4" style="width:700px;height:500px;"></div></td>
      </tr>
      <tr>
        <td><div id="5" style="width:700px;height:500px;"></div></td>
        <td><div id="6" style="width:700px;height:500px;"></div></td>
      </tr>
      <tr>
        <td><div id="7" style="width:1000px;height:500px;"></div></td>
      </tr>
    </table>
  </body>
</html>

score 0 · Accepted Answer · answered Oct 12 '18 at 11:58

first, recommend assigning the size of the chart in the chart options,
rather than in the container's style attribute
and since we're dealing with circles,
also recommend using the same size for height and width (500 x 500)

next, use chart option chartArea to stretch the chart to the width of the container.
to do so, you will need to move the legend to the top or bottom.

  chartArea: {
    height: '100%',
    width: '100%',
    top: 36,
    right: 12,
    bottom: 12,
    left: 12
  },
  legend: {
    position: 'top',
    alignment: 'center'
  },

use chartArea options top, right, bottom, left to leave room on the edges,
for things like the title, legend, and the "slice highlight" on hover

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function() {
  var datatable = new google.visualization.DataTable();
  datatable.addColumn('string', 'Type');
  datatable.addColumn('number', 'Quantity');
  datatable.addRows([
    ['A', 10],
    ['B', 10],
    ['C', 10],
    ['D', 10],
  ]);

  for (var i = 1; i <= 7; i++) {
    drawChart(i);
  }

  function drawChart(index) {
    var options = {
      chartArea: {
        height: '100%',
        width: '100%',
        top: 36,
        right: 12,
        bottom: 12,
        left: 12
      },
      title: 'Chart ' + index,
      is3D: 'true',
      legend: {
        position: 'top',
        alignment: 'center'
      },
      height: 500,
      width: 500
    };
    var chart = new google.visualization.PieChart(document.getElementById(index.toString()));
    chart.draw(datatable, options);
  }
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<table>
  <tr>
    <td><div id="1"></div></td>
    <td><div id="2"></div></td>
  </tr>
  <tr>
    <td><div id="3"></div></td>
    <td><div id="4"></div></td>
  </tr>
  <tr>
    <td><div id="5"></div></td>
    <td><div id="6"></div></td>
  </tr>
  <tr>
    <td colspan="2"><div id="7"></div></td>
  </tr>
</table>

could you maybe help me with this too?: https://sharepoint.stackexchange.com/questions/250682/sorting-of-google-charts-in-sharepoint/250724 — Fabian M, Oct 12 '18 at 14:38
not sure how to help, what is the sort order you're looking for? — WhiteHat, Oct 12 '18 at 17:19
a manual one. i would like to write something like: sort (A,C,S,U,B) — Fabian M, Oct 15 '18 at 11:31

Remove space between Google Charts in a table

1 Answers1