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-

Answer 1

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);

    });

}