Google charts - Stacked Bar Chart. How to introduce different colours within each bar

Question

I am creating a stacked bar chart using google api. Each bar will consist of 3 "slices" representing Negative, Neutral and Positive feedback we received.

my data and options code looks as follows:

 data = google.visualization.arrayToDataTable([
              ['Category', 'Negative', 'Neutral', 'Positive', ],
              ['icon', 10, 800, 5],
              ['colour', 5, 5, 5],
              ['copy', 5, 5, 5],
              ['navigation', 5, 5, 5]
            ]);
        };
   options = {
        isStacked: true,
        width: '100%',
        height: 400,
        hAxis: {title: 'Category', textStyle: {bold : true, fontSize: 24}, titleTextStyle: {color: 'White'}},
        vAxis: {title: 'Responses', textStyle: {bold : true, fontSize: 24}, titleTextStyle: {color: 'White'}},

        };
  var chart = new google.charts.Bar(document.getElementById('categoryChart'));

        chart.draw(data, google.charts.Bar.convertOptions(options));

I have been trying to address that by adding an array like this to options

colors:['red','blue', 'green'].

to options but that only picks the first colour (red) and applies it to whole bars (slices are just separated by gradient).

Any tips how to control the colours of each part of the bar chart?

Best,

Adam

Just to be clear - I want to edit colours of slices within each bar - the bottom one to be red, middle one - blue and top one - green — Adam P

R3tep R3tep · Accepted Answer · 2015-05-07T14:05:44

~~It's possible to change the color style like this :~~

data = google.visualization.arrayToDataTable([
          ['Category', 'Negative', 'Neutral', 'Positive', { role: 'style' }],
          ['icon', 10, 800, 5, '#b87333'],
          ['colour', 5, 5, 5, 'silver'],
          ['copy', 5, 5, 5, 'gold'],
          ['navigation', 5, 5, 5, 'color: #e5e4e2']
      ]);

Update :

The problem occur in this line :

var chart = new google.charts.Bar(document.getElementById('categoryChart'));

You using google.charts.Bar instead of google.visualization.ColumnChart

Working example :

google.load('visualization', '1', {
    packages: ['corechart', 'bar']
});
google.setOnLoadCallback(drawBarColors);

function drawBarColors() {
    var data = google.visualization.arrayToDataTable([
        ['Category', 'Negative', 'Neutral', 'Positive'],
        ['icon', 10, 100, 5],
        ['colour', 5, 5, 5],
        ['copy', 5, 5, 5],
        ['navigation', 5, 5, 5]
    ]);

    var options = {
        isStacked: true,
        width: '100%',
        height: 400,
        colors: ['red', 'blue', 'green'],
        hAxis: {
            title: 'Category',
            textStyle: {
                bold: true,
                fontSize: 24
            },
            titleTextStyle: {
                color: 'White'
            }
        },
        vAxis: {
            title: 'Responses',
            textStyle: {
                bold: true,
                fontSize: 24
            },
            titleTextStyle: {
                color: 'White'
            }
        },

    };

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

  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <div id="chart_div"><div>

Reference

Google Chart Docs Gallery BarChart

Google charts - Stacked Bar Chart. How to introduce different colours within each bar

1 Answers