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>

Georginegeorglana

The google charts table is not SVG, it is HTML, so you should be able to alter styles simply by adding new CSS styles. – Mezcaline

Did you read this? developers.google.com/chart/interactive/docs/… – Harijan

@Georginegeorglana Don't be "one of them". You should close this question or answer it by yourself. – Hintz

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. – Georginegeorglana

@Georginegeorglana - 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. – Shue

Ok i accepted your answer thank you for taking the time. – Georginegeorglana

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! :-) – Georginegeorglana

Answer 1

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);

Shue

Answers consisting of only links ( especially to external resources ) are not considered good answers for Stack Overflow. The possibility of link rot means that if that URL was to die (or change), your post will contain no useful information. – Formally

Please add the relevant solution here in your post and leave the link only for reference. – Formally

+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): developers.google.com/chart/interactive/docs/gallery/… – Hirza

Answer 2

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

1. It worked from the style: .tableRow { background-color:rgb(246, 253, 253); }
2. It also worked from standart css: tr:hover {background-color: ...;}
3. 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>

Tericaterina

Answer 3

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

Inconsonant

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 github.com/weekdone/GoogleChartStyles/blob/master/css/… – Inconsonant