Semi-transparent colors in Google Charts

by cristiscu

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

JavaScript

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Y1', 'Y2'],
    ['2010', 10, 14], ['2020', 14, 22], ['2030', 16, 24]]);

  var colors = ['#00ffff', '#ff00ff'];
  var map = {
    '#00ffff': 'rgba(0,255,0,0.5)',
    '#ff00ff': 'rgba(255,0,0,0.5)'
  };

  var chart = new google.visualization.ColumnChart($('#chart_div')[0]);

  google.visualization.events.addListener(chart, 'ready', function () {
    $("rect").each(function() {
      var fillValue = $(this).attr('fill');
      if (colors.indexOf(fillValue) > -1)
        $(this).attr('fill', map[fillValue]);
    });
  });

  chart.draw(data, { colors: colors });
}