Hi Bori, We acknowledge several deficiencies in the layout of annotations, and in bar and column charts especially. We plan to fix these in the coming months by doing something like what you suggest, drawing a line between an annotation that doesn't fit inside a bar, connecting it with its bar. Until then, I can't suggest any reasonable workaround for your particular case.
Before the general solution, we might offer an intermediate solution that would let you specify the location or offset of your annotation on a per-annotation basis. It would be awkward, but would satisfy many special cases. On Tue, Jan 5, 2016 at 3:11 PM, Bori Konstantinov < [email protected]> wrote: > 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 > <https://groups.google.com/d/msgid/google-visualization-api/860784da-beba-4052-b74d-9501a99e2441%40googlegroups.com?utm_medium=email&utm_source=footer> > . > For more options, visit https://groups.google.com/d/optout. > -- Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> [email protected] <[email protected]> 5CC, Cambridge MA -- 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/CAOtcSJMz6OqE_fNQ_xOUb99RB6%3DbTZGviY5gciZQ4-nUj%3D2ogg%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
