Annotation Forcing To Appear Inside Stacked Bar Charts Using Google Chart Api
I have a stacked bar chart where I need to annotate the bars inside the bars. I am successful in annotating of the bars but thats appearing outside. How do I force the annotations
Solution 1:
as you noted, there is not an option for "always inside". and the chart will normally place annotations inside by default, so long as there is enough room.
in this case, I believe the reason they do not appear inside, is because the font is too big.
since the font has been reduced on the axis, reducing the font of the annotations, allows them to be drawn inside the bars.
annotations: {
textStyle: {
fontSize:8,
fontName:'Muli',
bold:false,
},
},see following working snippet...
<html><head><scripttype="text/javascript"src="https://www.gstatic.com/charts/loader.js"></script><scripttype="text/javascript">
google.charts.load("current", {
packages: ["corechart"]
});
google.charts.setOnLoadCallback(drawChart);
var bar_chart_data = [
["Material", "Cost", "Profit", {
"role": "style"
}, {
"role": "style"
}],
["A", 235.53, 117.765, "color: blue", "color: red"],
["B", 35.28, 14.8176, "color: blue", "color: red"],
["C", 495, 207.9, "color: blue", "color: red"],
["D", 44.52, 18.6984, "color: blue", "color: red"],
["E", 69.56, 29.2152, "color: blue", "color: red"],
["F", 4.5, 1.89, "color: blue", "color: red"],
["G", 16.62, 6.9804, "color: blue", "color: red"],
["H", 74.88, 31.449599999999997, "color: blue", "color: red"],
["I", 21.2, 8.904, "color: blue", "color: red"],
["J", 4.8, 2.016, "color: blue", "color: red"],
["K", 400, 168, "color: blue", "color: red"],
["L", 4.88, 2.0496, "color: blue", "color: red"],
["M", 45, 18.9, "color: blue", "color: red"],
["N", 0, 0, "color: blue", "color: red"],
["O", 9, 3.78, "color: blue", "color: red"],
["P", 4, 1.68, "color: blue", "color: red"],
["Q", 4.16, 1.7472, "color: blue", "color: red"]
]
functiondrawChart() {
var data = google.visualization.arrayToDataTable(bar_chart_data);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
}, 3, // <-- include style column2, {
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation"
}, 4// <-- include style column
]);
var options = {
title: "Live individual material cost break-up (%)",
width: 600,
height: 400,
bar: {
groupWidth: "95%"
},
legend: {
position: "none"
},
isStacked: 'percent',
annotations: {
textStyle: {
fontSize: 8,
fontName: 'Muli',
bold: false,
},
},
hAxis: {
textStyle: {
fontSize: 8,
fontName: 'Muli',
bold: false,
},
},
vAxis: {
textStyle: {
fontSize: 10,
bold: false
},
},
};
var chart = new google.visualization.BarChart(document.getElementById("material_bar_chart"));
chart.draw(view, options);
}
</script><style>.ignore-css{all:unset;}
</style></head><body><divclass="ignore-css"id="material_bar_chart"style="width: 900px; height: 500px;"></div></body></html>
Post a Comment for "Annotation Forcing To Appear Inside Stacked Bar Charts Using Google Chart Api"