Styling Google Charts Table

Question

I am trying to add CSS style to a Google Charts Table. I tried this:

https://developers.google.com/chart/interactive/docs/gallery/table#customproperties

on the first cell (Mike) but it didn't work. I set allowHtml to true in the options variable. How can I change the background, text color, etc. of the individual cells? Thank you.

<script type="text/javascript">
        google.load('visualization', '1', {packages:['table']});
        google.setOnLoadCallback(drawTable);
        function drawTable() {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Employee Name');
            data.addColumn('date', 'Start Date');
            data.addRows(3);
            data.setCell(0, 0, 'Mike', {style: 'background-color:red;'});
            data.setCell(0, 1, new Date(2008, 1, 28));
            data.setCell(1, 0, 'Bob');
            data.setCell(1, 1, new Date(2007, 5, 1));
            data.setCell(2, 0, 'Alice');
            data.setCell(2, 1, new Date(2006, 7, 16));

            var options = {
                allowHtml: true
            };

            // Create a formatter.
            // This example uses object literal notation to define the options.
            var formatter = new google.visualization.DateFormat({formatType: 'long'});

            // Reformat our data.
            formatter.format(data, 1);

            // Draw our data
            var table = new google.visualization.Table(document.getElementById('dateformat_div'));
            table.draw(data, options);
        }
    </script>

The google charts table is not SVG, it is HTML, so you should be able to alter styles simply by adding new CSS styles. — user1477388, Oct 09 '12 at 13:49
Did you read this? https://developers.google.com/chart/interactive/docs/examples#custom_table_example — Ron van der Heijden, Oct 09 '12 at 13:57
@carlosgg Don't be "one of them". You should close this question or answer it by yourself. — Deele, Jul 14 '14 at 04:22
Ok, I want to close it, how do I close it? I have seen when I post a question I can "accept" the answer (green checkmark) and then that closes it, but here the answer is a comment. Thank you. — carlosgg, Jul 15 '14 at 12:02
@carlosgg - yes, just answer it however you like and accept the answer so it doesn't show up in the Unanswered view. People like me looking to help you on an unanswered question would be saved the time of reading these comments. — J E Carter II, Jul 16 '14 at 12:49
Also, sorry I didn't move on this earlier, at first I did not realize what you guys were asking me to do. From now on, I know! :-) — carlosgg, Jul 17 '14 at 13:46

J E Carter II · Accepted Answer · 2014-07-16T14:00:00.443

14

How can I change the background, text color, etc. of the individual cells? Thank you.

Per @Bondye's comment, the answer is found in the developers guide.

https://developers.google.com/chart/interactive/docs/examples#custom_table_example

Define style rules that match your criteria:

<style>
.orange-background {
   background-color: orange;
  }

 .orchid-background {
  background-color: orchid;
 }

.beige-background {
 background-color: beige;
  }
</style>

Apply them to the table when drawn.

var cssClassNames = {
'headerRow': 'italic-darkblue-font large-font bold-font',
'tableRow': '',
'oddTableRow': 'beige-background',
'selectedTableRow': 'orange-background large-font',
'hoverTableRow': '',
'headerCell': 'gold-border',
'tableCell': '',
'rowNumberCell': 'underline-blue-font'};

var options = {'showRowNumber': true, 'allowHtml': true, 'cssClassNames': cssClassNames};

var data = new google.visualization.DataTable();

//... add data here ...

var table = new google.visualization.Table(container);
table.draw(data, options);

edited Jul 16 '14 at 14:00

answered Jul 16 '14 at 13:37

J E Carter II

1,436
1
22
39

4

Answers consisting of only links ( especially to external resources ) are not considered good answers for [so]. The possibility of link rot means that if that URL was to die (or change), your post will contain no useful information. – Lix Jul 16 '14 at 13:42
Please add the relevant solution here **in your post** and leave the link only for reference. – Lix Jul 16 '14 at 13:42
1

+1 Good answer. For those interested, a description of the objects that classes can be applied to is found here (see *cssClassNames* in the table): https://developers.google.com/chart/interactive/docs/gallery/table#configuration-options – EvilDr May 25 '17 at 09:15

score 2 · Answer 2 · answered Jul 11 '19 at 09:25

Custom table formatting for google-charts was tricky for me:

It worked from the style: .tableRow { background-color:rgb(246, 253, 253); }
It also worked from standart css: tr:hover {background-color: ...;}
It sometimes worked only with !important css key: background-color: rgba(141, 186, 238, 0.76) !important;

Here's my working sample:

// Load the Visualization API and the controls package.
google.load('visualization', '1.0', { packages: ['table'] });

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawDashboard);

// Callback that creates and populates a data table,
// instantiates a dashboard, a range slider and a pie chart,
// passes in the data and draws it.
function drawDashboard() {
  // Create our data table.
  var data = google.visualization.arrayToDataTable([
    ['Sex', 'Name', 'Donuts eaten', 'Html'],
    ['Male', 'Michael', 5, '<input type="checkbox" id="1" name="check">'],
    ['Female', 'Elisa', 7, '<input type="checkbox" id="2" name="check">'],
    ['Male', 'Robert', 3, '<input type="checkbox" id="3" name="check">'],
    ['Male', 'John', 2, '<input type="checkbox" id="4" name="check">'],
    ['Female', 'Jessica', 6, '<input type="checkbox" id="5" name="check">'],
    ['Male', 'Aaron', 1, '<input type="checkbox" id="6" name="check">'],
    ['Female', 'Margareth', 8, '<input type="checkbox" id="7" name="check">'],
  ]);
  var table = new google.visualization.Table(document.getElementById('table'));
     
  var options = 
  {
    allowHtml: true, 
    showRowNumber: true, 
    width: '100%', 
    height: '100%'
    ,
    cssClassNames: { 
      headerRow: 'headerRow',
      tableRow: 'tableRow',
      oddTableRow: 'oddTableRow',
      selectedTableRow: 'selectedTableRow',
      // hoverTableRow: 'hoverTableRow',
      headerCell: 'headerCell',
      tableCell: 'tableCell',
      rowNumberCell: 'rowNumberCell'
    }    

  };

  table.draw(data, options);
}

body
{
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}


/* Tables */
th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: rgb(83, 133, 180);
  border-color: rgb(151, 150, 168) !important;
  color: white;
}

.oddTableRow {
    background-color:rgb(232, 246, 247);
}

.tableRow { background-color:rgb(246, 253, 253); } 

tr:hover {background-color: rgba(233, 235, 154, 0.76) !important;}
.selectedTableRow {
    background-color: rgba(141, 186, 238, 0.76) !important;
}

<!doctype html>

<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script src="script.js"></script>
  </head>
      
  <body>
    <h1>Google Charts. Custom HTML & CSS in table</h1>
    <div id="table"></div>
  </body>
</html>

score 1 · Answer 3 · answered Apr 05 '19 at 16:28

1

For more modern widgets and charts you can apply custom css to Google Charts see this repo for already implemented styles

https://github.com/weekdone/GoogleChartStyles

answered Apr 05 '19 at 16:28

pedrofernandes

16,354
10
36
43

1

I never say that. This link show a project where author implemented CSS inside Google Charts and override default styles to a new layout. And yes table have a custom css inside see https://github.com/weekdone/GoogleChartStyles/blob/master/css/tables.css – pedrofernandes Apr 16 '19 at 11:28

Styling Google Charts Table

3 Answers3

Linked