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 :
JavaScript
x
14
14
1
var data = google.visualization.arrayToDataTable(my_data);
2
var options = {
3
title: 'S-Score',
4
colors: ['red', '#70a1c0'],
5
width: 700,
6
height: 400,
7
chartArea: { width: "60%" },
8
fontSize: 14,
9
legend: { position: 'right' },
10
bar: { groupWidth: '75%' },
11
isStacked: true
12
};
13
var chart = new google.visualization.ColumnChart(document.getElementById('E_chart'));
14
Advertisement
Answer
you can use 'transparent'
as the color name, here…
JavaScript
1
2
1
colors: ['transparent', '#70a1c0'],
2
see following working snippet…
JavaScript
1
27
27
1
google.charts.load('current', {
2
packages: ['corechart']
3
}).then(function () {
4
var data = google.visualization.arrayToDataTable([
5
['x', 'white', 'colored'],
6
['E', 0, 4],
7
['S', 4, 3],
8
['G', 7, 3],
9
['E', 10, 6],
10
['Score', 0, 16]
11
]);
12
13
var options = {
14
title: 'S-Score',
15
colors: ['transparent', '#70a1c0'],
16
width: 700,
17
height: 400,
18
chartArea: { width: "60%" },
19
fontSize: 14,
20
legend: { position: 'right' },
21
bar: { groupWidth: '75%' },
22
isStacked: true
23
};
24
25
var chart = new google.visualization.ColumnChart(document.getElementById('E_chart'));
26
chart.draw(data, options);
27
});
JavaScript
1
2
1
<script src="https://www.gstatic.com/charts/loader.js"></script>
2
<div id="E_chart"></div>