Change opacity of fill area in combo chart (Google charts)

Question

I was working on the combo chart (bar + scatter chart) of Google charts. I was not able to change the opacity of the data point and the fill area inside the bars. There was not much information provided in the documentation and I tried to change opacity using methods mentioned for other charts but nothing seemed to work.

Here is the link to the chart I was trying to work on- jsFiddle

google.charts.load('current', {
    'packages': ['corechart']
  });
  google.charts.setOnLoadCallback(drawVisualization);

  function drawVisualization() {
    // Some raw data (not necessarily accurate)
    var sett = 'fill-color: #76A7FA; fill-opacity: 0.5; stroke-color: #76A7FA; stroke-width: 1;';
    var data = google.visualization.arrayToDataTable([
      ['Month', 'Bolivia', 'Average', {
        role: 'style'
      }],
      ['2004/05', 450, 614.6, sett],
      ['2005/06', 288, 682, sett],
      ['2006/07', 397, 623, sett],
      ['2007/08', 215, 609.4, sett],
      ['2008/09', 366, 569.6, sett],
      ['2009/05', 450, 614.6, sett],
    ]);

    var options = {
      title: 'Monthly Coffee Production by Country',
      vAxis: {
        title: 'Cups'
      },
      hAxis: {
        title: 'Month'
      },
      legend: 'none',
      fillOpacity: 0.3,
      pointShape: {
        type: 'triangle',
        rotation: 180
      },
      pointSize: 7,
      series: {
        0: {
          type: 'bars',
          areaOpacity: 0.3
        },
        1: {
          type: 'scatter',
          opacity: 0.5,
          color: 'blue'
        }
      }
    };

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

Answer 1

you can use a 'style' column role to change the opacity,
which it appears you have

however, the style role must follow each series column to which you want to apply the style

so to make the columns opaque, add the style following the second column,
see following working snippet...

google.charts.load('current', {
  'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawVisualization);

function drawVisualization() {
  // Some raw data (not necessarily accurate)
  var sett = 'fill-color: #76A7FA; fill-opacity: 0.5; stroke-color: #76A7FA; stroke-width: 1;';
  var data = google.visualization.arrayToDataTable([
    ['Month', 'Bolivia', {role: 'style'}, 'Average', {role: 'style'}],
    ['2004/05', 450, sett, 614.6, sett],
    ['2005/06', 288, sett, 682, sett],
    ['2006/07', 397, sett, 623, sett],
    ['2007/08', 215, sett, 609.4, sett],
    ['2008/09', 366, sett, 569.6, sett],
    ['2009/05', 450, sett, 614.6, sett],
  ]);

  var options = {
    title: 'Monthly Coffee Production by Country',
    vAxis: {
      title: 'Cups'
    },
    hAxis: {
      title: 'Month'
    },
    legend: 'none',
    fillOpacity: 0.3,
    pointShape: {
      type: 'triangle',
      rotation: 180
    },
    pointSize: 7,
    series: {
      0: {
        type: 'bars',
        areaOpacity: 0.3
      },
      1: {
        type: 'scatter',
        opacity: 0.5,
        color: 'blue'
      }
    }
  };

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

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 100%; height: 500px;"></div>