Custom chart google callback legend

I can't figure out how to solve the problem as shown in the picture, I want to customize the google chart as shown in the image below Hope you guys can help me https://www.awesomescreenshot.com/image/22233816?key=87309c6f5b737125c53ca538972e75ad (image chart goolgle)

console.log(graphId, data);
areaHeight = typeof areaHeight !== 'undefined' ? areaHeight : 280;
if (data.length <= 1) {
drawNoData(graphId);
return;
} else {
var dlength = data[0].length;
for (var ditem in data) {
if (dlength != data[ditem].length) {
drawErrorData(graphId);
return;
}
}
}
var options = {
series: {
0: {
color: '#b4ddfd'
},
1: {
color: '#84bfef'
},
2: {
color: '#559ad2'
},
3: {
color: '#4277a1'
},
},
vAxis: {
textStyle: {fontSize: 11},
titleTextStyle: {italic: false},
},
chartArea: {
width: '85%',
height: areaHeight,
top: 30,
left: '13%'
},
bar: {groupWidth: '35%'},
legend: {
position: 'bottom',
textStyle: {fontSize: 11},
},
isStacked: 'percent',
hAxis: {
ticks: [0, 1],
textStyle: {fontSize: 13},
minValue: 0,
maxValue: 1,
},
callbackLegend: function(legend) {
// var legend_div = document.getElementById(graphId + '_legend');
// legend_div.innerHTML = legend.innerHTML;
},
width: 920,
height: areaHeight + 100
};
var formatter = new google.visualization.NumberFormat({
pattern: '#.##%'
});

var gdata = google.visualization.arrayToDataTable(data);

for (var i = data[0].length - 2; i > 0; i--) {
formatter.format(gdata, i);
}

var chart = new google.visualization.BarChart(document.getElementById(graphId));
chart.draw(gdata, options);
}```

callbackLegend: function(legend) {
// var legend_div = document.getElementById(graphId + '_legend');
// legend_div.innerHTML = legend.innerHTML;
},