Google chart stacked column chart. How to style each individual stacked item (data series)

Question

I've built a google chart stacked column chart. I am able to annotate each stacked item. When it comes to styling each column item, only the last stacked item is effected.

working code for the last stacked item:

// Create the data table.
var data = google.visualization.arrayToDataTable([
    ['Genre', '', "Label", { role: 'annotation', role:'style' } ],
    ['column1', 5, 11, 31,  'opacity: 0.2'],
    ['column2', 5, 12, 32,  'opacity: 0.2'],
    ['column3', 5, 13, 33,  'opacity: 0.2'],
    ['column4', 5, 14, 34,  'opacity: 0.2'],
    ['column5', 5, 15, 35,  'opacity: 0.2'],
    ['column6', 5, 26, 36,  'opacity: 0.2']
]);

I've played around with the code a lot but always receive an error. I would like to apply styles for each of the series of data in each data row(stacked columns).

Answer 1

Sets the style for all charts, like the last chart.

var data = google.visualization.arrayToDataTable([
    ['Genre', 'Label1', { role: 'annotation', role:'style' }, 'Label2', { role: 'annotation', role:'style' }, 'Label3', { role: 'annotation', role:'style' } ],
    ['column1', 5,  'opacity: 0.2', 11,  'opacity: 0.2', 31,  'opacity: 0.2'],
    ['column2', 5,  'opacity: 0.2', 12,  'opacity: 0.2', 32,  'opacity: 0.2'],
    ['column3', 5,  'opacity: 0.2', 13,  'opacity: 0.2', 33,  'opacity: 0.2'],
    ['column4', 5,  'opacity: 0.2', 14,  'opacity: 0.2', 34,  'opacity: 0.2'],
    ['column5', 5,  'opacity: 0.2', 15,  'opacity: 0.2', 35,  'opacity: 0.2'],
    ['column6', 5,  'opacity: 0.2', 26,  'opacity: 0.2', 36,  'opacity: 0.2']
]);

jsfiddle

PS : You forgot one index in the label array