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>

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

Answer 2

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

Answer 3

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

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