Hi all,
I have a question regarding annotation labels on a StackedBar Chart. I
currently have annotated stack bar where the labels are on the inside. But
I may have situations where a bar segment may be pretty small, and hence
the label might not actually fit inside the segment. In this situation, I
am looking to have the label appear right above that specific segment with
a line pointing from that label to the segment, so it's clear what segment
that label is for.
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript"
src="https://www.google.com/jsapi";></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = google.visualization.arrayToDataTable([
[ 'Discount Amount',
'No Discount', { role: 'annotation' } ,
'1% - 10%', { role: 'annotation' } ,
'11% -24%', { role: 'annotation' } ,
'25-49%', { role: 'annotation' } ,
'50%+', { role: 'annotation' } ,
'Unsure', { role: 'style' },{ role: 'annotation' } ],
['Overall average discount',14, '14%', 15, '15%', 10,'10%', 10,
'10%', 13, '13%', 39,'opacity: 0.2','39%'],
['NetApp', 13,'13%', 9, '9%', 13, '13%', 13, '13%', 35, '35%',1,
'opacity: 0.2','1%'],
['EMC', 7, '7%', 13, '13%', 7, '7%', 7, '7%', 13, '13%', 53,
'opacity: 0.2','53%'],
['Synology',33, '33%', 33,'33%',0,'',0,'',17,'17%',17, 'opacity:
0.2','17%'],
['Dell',0,'',0,'',0,'',20,'20%',0,'',80, 'opacity: 0.2','80%']
]);
var options = {
title: 'Discount threshold',
width: 1000,
height: 600,
legend: { position: 'top', maxLines: 6 },
bar: { groupWidth: '50%' },
isStacked: 'percent',
colors: ['#00CDCD', '#EEAD0E', '#FF00FF', '#32CD32', '#CD0000',
'#808080'],
hAxis: { textPosition: 'none', gridlines:{color:'transparent'}},
annotations: { position: 'top'}
};
// Instantiate and draw our chart, passing in some options.
var chart = new
google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
This code produces the attached bar graph. As you can see, there is a very
small segment on the NetApp row (very last segment) which I've hard-coded
to have a 1% percentage. This segment is obviously too small have the
percentage fit inside, so I would like to have a appear above that segment
with a line connecting. I know of the 'annotation.alwaysOutside'
configuration I can enable, but that applies that to all the labels, but
I'm only concerned with the label that fit the above description. Would
this require some sort of secondary helper function? Any suggestions?
Thank you very much!
<https://lh3.googleusercontent.com/-a-s4yyQrxjs/VowiHO432qI/AAAAAAAAAq4/YCWbInvSfyw/s1600/Screen%2BShot%2B2016-01-05%2Bat%2B3.05.12%2BPM.png>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/860784da-beba-4052-b74d-9501a99e2441%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
