CSS Styling

83 views
Skip to first unread message

kiwis

unread,
Nov 19, 2021, 9:06:37 PM11/19/21
to Google Visualization API
I'm looking at Google Charts (specific table charts) as an alternative to my current solution.

Can I apply CSS padding to my table? I want it applied to all rows/columns and cells.

How can I make header backgrounds a specific color and font another?

Also how can I align some content left, middle or right?

Ray Thomas

unread,
Jan 29, 2022, 3:38:13 PMJan 29
to Google Visualization API
In case you haven't found it yet and it might help someone else, you need to read https://developers.google.com/chart/interactive/docs/gallery/table?hl=en#configuration-options

There are three parts to getting CSS styles to work in tables.

1) Set the HTML and CSS in options
2) Define the class names
3) Write the styles

The options should contain at a minimum

var options = {
   allowHtml: true,
   cssClassNames: cssNames 
};

Then using whatever you called the cssClassNames (I used cssNames, but it can be whatever you want)

var cssNames = {
'headerRow': 'headercss',
'tableCell': 'cellcss'
};

Then write the styling for whatever you called the CSS classes 

<style>
.cellcss { 
    text-align: left;
    padding: 10px;
}
.headercss {
    background-color: blue;     text-transform: uppercase;
    color: white;
}
</style>

Kelly Royal

unread,
Jan 29, 2022, 4:14:03 PMJan 29
to google-visua...@googlegroups.com
Unsubscribe 

Thanks,
-Kelly
--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/682a34fd-a6e1-4e05-9cfe-b67f55e49cc5n%40googlegroups.com.

Chrystopher Casero Dizon

unread,
Jan 30, 2022, 3:25:24 AMJan 30
to google-visua...@googlegroups.com
"0x74b52fc0bc381b1452e3746907edc4b89fb00bdc0bed041dd76cece98242c848","10982728","1601724692","2020-10-03 11:31:32","0x47ea0ab486f9d00f16d9f248e3388586e061f7f8","0x0bc529c00c6401aef6d220be8c6ea1667f6ad93e","","0","0","0","0.00221285","8.879060625","346.32","","","Approve",""

--
Reply all
Reply to author
Forward
0 new messages