Resize google table chart row height

charts, css, google-visualization, html, javascript

Solution

just add `height` to the css class `small-font`...

.small-font {
  font-size: 8px;
  height: 10px;
}

be sure to include this chart option...

allowHtml: true

see following working snippet...

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

function drawChart() {
  var data = new google.visualization.arrayToDataTable([
    ['Year', 'Value'],
    ['2010', 10],
    ['2020', 14],
    ['2030', 16],
    ['2040', 22],
    ['2050', 28]
  ]);

  var options = {
    allowHtml: true,
    cssClassNames: {
      tableCell: 'small-font'
    }
  };

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

.small-font {
  font-size: 8px;
  height: 10px;
}

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

Problem

I have a google visualization dashboard with a table chart (as in https://developers.google.com/chart/interactive/docs/gallery/table) displaying some data shown below. Ive managed to change the font size of the table using CSS Class Names but the row height is still the default size - which Id like to change and make smaller. What Ive used for the font - CSS: ``` .small-font { font-size: 10px; } ``` javascript: ``` var cssClassNames = { tableCell: 'small-font' }; ``` Is there a way to do this using CSS or another method?

Original source