Google Table Charts - how to set transparency of rows?

Question

I want to style my Google Table Chart, but I cannot set opacity/transparency to rows in Table.

I use 'cssClassNames': cssClassNames but opacity works only for text in row, not for background in row.

How can I change it?

CSS:

.row-style {
    background-color: rgba(255,255,255,0.5);
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #FFFFFF;
    border-bottom-color: #BFD6E8;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    margin-bottom: .5%;
    opacity: 0.3;
}

JS:

 <script type="text/javascript">
  function drawTable(results, question_title) {

    var cssClassNames = {
    'headerRow': 'header-row-style',
    'tableRow': 'row-style',
    'oddTableRow': 'odd-row-style',

    };

    var options = {'showRowNumber': true, 'allowHtml': true, 'cssClassNames': cssClassNames,
        showRowNumber: false, allowHtml: true, alternatingRowStyle:true, width: '95%', height: '70%',
        backgroundColor: "transparent"};

    var data = new google.visualization.DataTable(results, question_title);
    data.addColumn('string', question_title);
    data.addRows(results);


    var table = new google.visualization.Table(document.getElementById('chart'));

    table.draw(data, options, {backgroundColor: "transparent"});

  }
</script>

Answer 1

google's table chart sets the background color to white by default
override with css

.container table {
  background-color: transparent;
}

then use the last argument of the rgba color to change the background opacity of the rows

.row-style {
  background-color: rgba(255,255,255,0.5);  /* <-- 0.5 will be opacity for background */
  ...

see following working snippet...

google.charts.load('current', {
  packages:['table']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'From');
  data.addColumn('string', 'To');
  data.addColumn('number', 'Weight');
  data.addRows([
    ['A', 'B', 40],
    ['A', 'C', 15],
    ['C', 'H', 8],
    ['C', 'E', 5],
    ['C', 'D', 2],
    ['C', 'G', 2],
    ['C', 'F', 1],
    ['H', 'I', 2],
    ['J', 'M', 10],
    ['J', 'K', 4],
    ['J', 'L', 1],
    ['M', 'P', 4],
    ['M', 'N', 3],
    ['M', 'O', 1],
    ['P', 'Q', 1]
  ]);

  var cssClassNames = {
    headerRow: 'header-row-style',
    tableRow: 'row-style',
    oddTableRow: 'odd-row-style',
    headerCell: 'header-cell-style'
  };

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

  var table = new google.visualization.Table(document.getElementById('chart'));
  table.draw(data, options);
});

.container {
  background-color: rgba(255,0,0,1);
  padding: 8px;
}

.container table {
  background-color: transparent;
}

.header-row-style {
  background-color: rgba(0,255,0,1);
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #FFFFFF;
  border-bottom-color: #BFD6E8;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  margin-bottom: .5%;
}

.row-style {
  background-color: rgba(255,255,255,0.5);
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #FFFFFF;
  border-bottom-color: #BFD6E8;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  margin-bottom: .5%;
}

.odd-row-style {
  background-color: rgba(255,255,255,0.75);
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #FFFFFF;
  border-bottom-color: #BFD6E8;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  margin-bottom: .5%;
}

.header-cell-style {
  background-image: none;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="container">
  <div id="chart"></div>
</div>