Polymer google-chart table css - css

Question

I'm trying to insert css in my google-chart table.
My code
var cssClassNames = {'headerRow': 'cssHeaderRow',
'tableRow': 'cssTableRow',
'oddTableRow': 'cssOddTableRow',
'selectedTableRow': 'cssSelectedTableRow',
'hoverTableRow': 'cssHoverTableRow',
'headerCell': 'cssHeaderCell',
'tableCell': 'cssTableCell',
'rowNumberCell': 'cssRowNumberCell'
};
var options = {page: 'enable', pageSize:20, height:'100%',
sort:'enable', showRowNumber: true, width: '100%',
showRowNumber: true,
alternatingRowStyle:true, allowHtml: true,
cssClassNames: cssClassNames}
this.$.chart_class.options = options;
But it's not working.
I have added
this.$.chart_class.set('options', options);
and
this.$.chart_class.redraw();
I need to style the pagination too.

Answer 1

Please provide full code and what exactly you need but if you have already chart exist and you need styling of chart then you may use element's styling :
<template>
<style>
google-chart {
height: 300px;
width: 50em;
......
}
.....
</style>
<google-chart
type="{{type}}"
options="{{options}}"
cols="{{cols}}"
rows="{{rows}}">
</google-chart>
In case if you need to specify google-chart property dynamically than specify cols and rows, besides your options are not formatted as into element description. But simply you may use and define properties dynamically:
At the property declaration, you may define this properties and options. Or in a function with the button or somehow with calling this function:
defininingChartVariables(){
var type = "pie" // See the possible types below link.
var cols = [<specify an array for cols>];
var rows = [<specify an array for rows>];
var options = {title: "Chart title goes here",
hAxis: {title: "Categories"},
vAxis: {title: "Values", minValue: 0, maxValue: 2},
legend: "none" };
this.set('type',type);
this.set('cols',cols);
this.set('rows',rows);
this.set('optiosn',options);
}
see the possible types