Question

I use the Google Chart Service to create a table in Google Apps Script for my web app.
Now I have 2 problems:

1. When I add more rows and columns, The columns’ width is getting smaller until the point were scrollbars appear. I added a code example. Can I change/increase the (maximum) displayed size of the chart, so that there are no scrollbars?

2. I need a string-column, which is aligned to the right. The default is a aligned to the left for string columns. How can I change this? And are there more options to modify the format of the table (text size, colors, bold etc.)?

   function doGet() {
   var app = UiApp.createApplication();
   
   var data = Charts.newDataTable()
   .addColumn(Charts.ColumnType.STRING, "Name")
   .addColumn(Charts.ColumnType.STRING, "Gender")
   .addColumn(Charts.ColumnType.NUMBER, "Age")
   .addColumn(Charts.ColumnType.NUMBER, "Donuts eaten")
   .addColumn(Charts.ColumnType.NUMBER, "Donuts eaten")
   .addColumn(Charts.ColumnType.NUMBER, "Donuts eaten")
   .addColumn(Charts.ColumnType.NUMBER, "Donuts eaten")
   .addRow(["Michael", "Male", 12, 5])
   .addRow(["Michael", "Male", 12, 5])
   .addRow(["Elisa", "Female", 20, 7])
   .addRow(["Robert", "Male", 7, 3])
   .addRow(["John", "Male", 54, 2])
   .addRow(["Jessica", "Female", 22, 6])
   .addRow(["Aaron", "Male", 3, 1])
   .addRow(["Margareth", "Female", 42, 8])
   .addRow(["Miranda", "Female", 33, 6])
   .addRow(["Miranda", "Female", 33, 6])
   .addRow(["Miranda", "Female", 33, 6])
   .addRow(["Miranda", "Female", 33, 6])
   .addRow(["Miranda", "Female", 33, 6])
   .addRow(["Miranda", "Female", 33, 6])
   .build();
   
   var tableChart = Charts.newTableChart().setDataTable(data)
   .build();
   
   app.add(tableChart);
   
   return app;
   }
   

Answer 1

About p.1. There are two ways to change a chart width and height. The 1st one is to use the setDimensions method of the TableChartBuilder class. A disadvantage of this method is that impossible to set width/height in the page width/height percentage. The 2nd way is to use the setOption methof of the same class. This method has no the disadvantage. The following code demonstrates it.

About p.2. Unfortunately, now it is not possible to align columns of the Table Chart. As far as I know it is even impossible to align columns of the GWT Table which is under the hood of the Table Chart. You are free to create a feature request on the GAS issue tracker about this lack.

function doGet() {
var app = UiApp.createApplication();

var data = Charts.newDataTable()
.addColumn(Charts.ColumnType.STRING, "Name")
.addColumn(Charts.ColumnType.STRING, "Gender")
.addColumn(Charts.ColumnType.NUMBER, "Age")
.addColumn(Charts.ColumnType.NUMBER, "Donuts eaten")
.addColumn(Charts.ColumnType.NUMBER, "Donuts eaten")
.addColumn(Charts.ColumnType.NUMBER, "Donuts eaten")
.addColumn(Charts.ColumnType.NUMBER, "Donuts eaten")
.addRow(["Michael", "Male", 12, 5])
.addRow(["Michael", "Male", 12, 5])
.addRow(["Elisa", "Female", 20, 7])
.addRow(["Robert", "Male", 7, 3])
.addRow(["John", "Male", 54, 2])
.addRow(["Jessica", "Female", 22, 6])
.addRow(["Aaron", "Male", 3, 1])
.addRow(["Margareth", "Female", 42, 8])
.addRow(["Miranda", "Female", 33, 6])
.addRow(["Miranda", "Female", 33, 6])
.addRow(["Miranda", "Female", 33, 6])
.addRow(["Miranda", "Female", 33, 6])
.addRow(["Miranda", "Female", 33, 6])
.addRow(["Miranda", "Female", 33, 6])
.build();

var tableChart = Charts.newTableChart().setDataTable(data);

//tableChart.setDimensions(1200, 100); // Uncomment this line if you wish to set dimentions in pixels.
tableChart.setOption('width', '100%');
tableChart.setOption('height', '100%');  


app.add(tableChart.build());

return app;
}