Semi-transparent colors in Google Charts?

Question

A call like

chart.draw(data, { colors: ['#e0440e', '#e6693e', '#ec8f6e', ...], ... });

creates a chart with colors looking like semi-transparent. However, we passed RGB colors, with no alpha parameter!

In other chart apps (like jqPlot, CanvasJS etc) you may pass rgba calls instead, like in

[ 'rgba(255,0,0,0.5)', 'rgba(0,255,0,0.5)', ...]

Google Charts does not seem to support this. But is there any other way to pass RGBA custom colors instead, with a simple syntax?

PS: there is a somehow similar question for pie charts, but mine is different, for custom color palettes.

Answer 1

once the 'ready' event fires on the chart, you can modify the svg

just need a way to find the chart elements you want to modify

in the following working snippet, random colors are used to feed the chart

then when 'ready' fires, those colors are found and replaced with rgba

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],
    ['2040', 22, 30],
    ['2050', 28, 36]
  ]);

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

  var options = {
    colors: seriesColors,
  };

  var chartDiv = document.getElementById('chart_div');
  var chart = new google.visualization.ColumnChart(chartDiv);

  // modify svg
  google.visualization.events.addListener(chart, 'ready', function () {
    Array.prototype.forEach.call(chartDiv.getElementsByTagName('rect'), function(rect) {
      if (seriesColors.indexOf(rect.getAttribute('fill')) > -1) {
        rect.setAttribute('fill', rgbaMap[rect.getAttribute('fill')]);
      }
    });
  });

  chart.draw(data, options);
}

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

Answer 2

Use $.attr('opacity', value) for all elements filtered by colors. exapmle with jQuery...

var options = {
  colors: ['#ff5722', '#1976D2', '#2196f3', '#BBDEFB', '#BDBDBD']
  },
  conteiner = $('div'),
  data = {},//some data
  chart = new
google.visualization.PieChart(conteiner);

google.visualization.events.addListener(chart, 'ready', function () {
    chartSetColorOpacity(conteiner, 0.8, options.colors);
});

google.visualization.events.addListener(chart, 'onmouseout', function () {
    chartSetColorOpacity(conteiner, 0.8, options.colors);
});

google.visualization.events.addListener(chart, 'onmouseover', function (target) {
    chartSetColorOpacity(conteiner, 0.8, options.colors);
});

google.visualization.events.addListener(chart, 'select', function (target) {
    chartSetColorOpacity(conteiner, 0.8, options.colors);
});

chart.draw(data, options);
        
function chartSetColorOpacity($container, opacity, matchColors){

    $container = $($container);

    if(!$container.is('svg')){
        $container = $container.find('svg');
    }

    if(typeof opacity === "number"){
        opacity = String(opacity);
    }else if(typeof opacity !== "string"){
        throw new Error('function chartSetColorOpacity(): opacity is not correct! opacity=' + opacity);
    }

    if(matchColors){
        if(typeof matchColors === "string") {
            matchColors = [matchColors];
        }
    }else {
        matchColors = false;
    }

    $container.find('*[fill]:not(opacity)').each(function(indx, element){

        var $this = $(this);

        if(matchColors !== false) {

            var matched = false,
                color = $this.attr('fill').toUpperCase();

            for (var i = matchColors.length - 1; i >= 0; i--) {
                if (matchColors[i].toUpperCase() == color) {
                    matched = true;
                    break;
                }
            }

            if (!matched) return;

        }

        $this.attr('opacity', opacity);

    });

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>