I am currently working on a project that requires me to add different colors to specific zones on a graph. I am looking to use colors such as blue, red, yellow, and green.
Here is the outcome I have achieved:
I am aiming for something similar to this design:
This is the code I have used
google.charts.load('current', { 'packages': ['bar'] });
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = google.visualization.arrayToDataTable([
['Week', 'Zone 0 - 60%', 'Zone 60 - 70%', 'Zone 70 - 80%', 'Zone 80 - 90%', 'Zone 90% +'],
['W45', 10, 24, 20, 32, 18],
['W46', 16, 22, 23, 30, 16],
['W47', 28, 19, 29, 30, 12],
['W48', 26, 25, 23, 10, 16],
['W49', 28, 19, 29, 40, 12],
['W50', 16, 22, 23, 30, 16],
['W60', 28, 19, 29, 30, 12],
['W61', 26, 25, 23, 10, 16],
['W62', 28, 19, 29, 40, 12],
['W63', 16, 22, 23, 30, 16],
['W64', 28, 19, 29, 30, 12],
['W65', 26, 25, 23, 10, 16],
['W66', 28, 19, 29, 40, 12],
['W67', 28, 19, 29, 30, 12],
['W68', 26, 25, 23, 10, 16],
['W69', 28, 19, 29, 40, 12],
['W70', 16, 22, 23, 30, 16],
['W71', 28, 19, 29, 30, 12],
['W72', 26, 25, 23, 10, 16],
['W73', 28, 19, 29, 40, 12]
]);
var options = {
width: '100%',
height: '100%',
chartArea: {
width: '90%',
height: '80%',
},
bar: { groupWidth: '75%' },
isStacked: true
};
var chart = new google.charts.Bar(document.getElementById('top_x_div'));
// Convert the Classic options to Material options.
chart.draw(data, google.charts.Bar.convertOptions(options));