Google charts javascript : Stacked column, transparent color

Question

Here is the stacked chart I have, I would like to be able to change the color of the session (here red) in transparent. Would you have an idea ? thanks.

And here is my code :

var data = google.visualization.arrayToDataTable(my_data);
var options = {
        title: 'S-Score',
        colors: ['red', '#70a1c0'],
        width: 700,
        height: 400,
        chartArea: { width: "60%" },
        fontSize: 14,
        legend: { position: 'right' },
        bar: { groupWidth: '75%' },
        isStacked: true
    };
    var chart = new google.visualization.ColumnChart(document.getElementById('E_chart'));

score 1 · Accepted Answer · answered Feb 18 '22 at 15:13

you can use 'transparent' as the color name, here...

    colors: ['transparent', '#70a1c0'],

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'white', 'colored'],
    ['E', 0, 4],
    ['S', 4, 3],
    ['G', 7, 3],
    ['E', 10, 6],
    ['Score', 0, 16]
  ]);

  var options = {
    title: 'S-Score',
    colors: ['transparent', '#70a1c0'],
    width: 700,
    height: 400,
    chartArea: { width: "60%" },
    fontSize: 14,
    legend: { position: 'right' },
    bar: { groupWidth: '75%' },
    isStacked: true
  };

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

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

Google charts javascript : Stacked column, transparent color

1 Answers1