Applying CSS to Google Visualization Table

How can I change the css properties of a google visualization table and it columns?

i did a google search on 'google-visualization-table-table' and came across this page.

It had multiple examples of table css properties, ie.:

.google-visualization-table-table {
  font-family: arial, helvetica;
  font-size: 10pt;
  cursor: default;
  margin: 0;
  background: white;
  border-spacing: 0;
}

thanks for the help asgallant!

How to add separate style to google.visualization.DataTable without changing its own styles

don't supply cssClassNames in the options,

just add somewhere on the page

the Table chart produces normal html table elements,

so you can style them as any other html table

in this example, two tables are drawn.

using the following css, both charts will have a green border

table {
  border: 2px solid lime;
}

the following css will only affect the second chart -- chart_div_1

#chart_div_1 th {
  color: magenta;
  text-align: left;
}

#chart_div_1 tr {
  outline: thin solid cyan;
}

so it's just a matter of finding a selector to meet your needs...

google.charts.load('current', {  callback: function () {    var data = google.visualization.arrayToDataTable([      ['Year', 'Sales', 'Expenses'],      ['2004',  1000,      400],      ['2005',  1170,      1170],      ['2006',  660,       1120],      ['2007',  1030,      540],      ['2008',  660,       660],      ['2009',  1030,      540]    ]);
    var options = {      allowHtml: true,      showRowNumber: true,      sortAscending: false,      sortColumn: 0,      width: '100%'    };
    new google.visualization.Table(document.getElementById('chart_div_0')).draw(data, options);    new google.visualization.Table(document.getElementById('chart_div_1')).draw(data, options);  },  packages:['table']});

/* style all tables */table {  border: 2px solid lime;}
/* style chart_div_1 only */#chart_div_1 th {  color: magenta;  text-align: left;}#chart_div_1 tr {  outline: thin solid cyan;}

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

Set the selected row css properties for a Google Visualization Table Chart

I think you should use background-color: beige !important; to override background color.

.selectedTableRow {
    font-style: italic;
    color: purple;
    font-size:15px;
    text-decoration: underline;
    border: 3px solid gold;
    background-color: beige !important;
  }

Fiddle

Or try to include your custom css file after table.css.

Styling Google Charts Table

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

Google Visualization Dashboard Table page button styling

you can try increasing the font-size

add the following CSS...

.google-visualization-table-page-number {
  font-size: 16px !important;
}

Customize Google Charts with CSS

Set the cssclassnames in options for the chart as below. Define the classes in the css file. Below example is for table chart.

chart1.options = {
    //      title: "User Chart",
            displayExactValues: true,
            'showRowNumber': false,
             'allowHtml': true, 
             is3D: true,
        //   'height' : '350px',
             cssClassNames : {
                 headerRow :'tableChartHeaderRow',
                 hoverTableRow : 'tableChartHeaderRowHighlightedState'
             }
         };

Google chart - how to change a css property for the whole table

What I have done in similar situations is use Firebug for Firefox to find the name, id, or class of the item that is causing the problem then add css for that element in my stylesheet.

If you do not already have Firebug on the latest version of Firefox, get it here: https://addons.mozilla.org/en-US/firefox/addon/firebug/us

EXAMPLE:

Say the id of the element is googleTable

#googleTable{
 border-collapse:separate !important;
}

Be Sure to include !important to ensure no inheritance takes place.

---

Related Topics