Here is your example in a jsfiddle: http://jsfiddle.net/dlaliberte/9ypf63re/ In this chart, I see the annotation values outside the bars, so this seems to be working as expected, though the negative values are on the wrong end of the bar, and thus inside the positive-side bar.
On Mon, Dec 14, 2015 at 12:08 PM, Kimberly Segers <[email protected] > wrote: > This is the code I use to implement the graph. > > var header = ['Months', 'invoice amount', { role: 'annotation' },{ role: > 'style' }, 'changed value', { role: 'annotation' },{ role: 'style' }]; > var rawData = [ > ['mar', 25,'€25',"fill-color: #00729e;", 0,'', ""], > ['apr', 0,'', "fill-color: #00729e;", 0,'', ""], > ['mei', 30,'€30', "fill-color: #00729e;", 0,'', ""], > ['jun', 40,'€40', "fill-color: #00729e;", 0,'', ""], > ['jul', 30,'€30', "fill-color: #00729e;", 0,'', ""], > ['Auth', 50,'€50', "fill-color: #00729e;", 0, '', ""], > ['sep', 60,'€60', "fill-color: #00729e;", 0, '', ""], > ['okt', 80,'€80', "fill-color: #00729e;", 0, '', ""], > ['nov', 100,'€100', "fill-color: #00729e;", 0, '', ""], > ['dec', 125,'€125', "fill-color: #00729e;", 0, '', ""], > ['jan', 150,'€150', "fill-color: #00729e;", -300, '-300', ""], > ['feb', 200,'€200', "fill-color: #00729e;", -50, '-50', ""], > ]; > > rawData.unshift(header); > var data = google.visualization.arrayToDataTable(rawData); > > var options = { > legend: {position: 'none'}, > isStacked:true, > backgroundColor: 'none', > width:"1000px", > bar: { groupWidth: '80%' }, > hAxis: { > baselineColor: 'red', > > }, > vAxis: { > baselineColor: '#666666', > textPosition: 'none', > gridlines: { > color: '#DEDEDE', > opacity:0.5 > }, > > }, > annotations: { > alwaysOutside:true, > textStyle: { > fontName: 'Helvetica', > fontSize: 10, > bold: false, > fill:"white", > color: '#ffffff', // The color of the text. > auraColor: 'none', // The color of the text outline. > opacity: 1 > } > }, > enableInteractivity: false > > }; > var chart = new > google.visualization.ColumnChart($j('#monthlyInvoiceGraph')[0]); > chart.draw(data, options); > > > > But now it doesn't show these values default on top when it doesn't fit > > Op maandag 14 december 2015 17:17:53 UTC+1 schreef Daniel LaLiberte: > >> Rereading your post, it seems your first image is showing a different >> problem. By default, it *should* be displaying the annotations that don't >> fit outside the bar, but instead, it is reducing the font until it fits, to >> the point that the text is unreadable. So I am not sure where that >> behavior is coming from, but it is a bug. We talked about adding an >> auto-sizing option, but I am surprised to see it implemented, if that is >> what is going on. >> >> The negative value display on the wrong end of the bar is a bug, so >> you'll have to wait until we can fix it. I can't think of any workaround >> for this in the meantime. >> >> >> On Monday, December 14, 2015 at 11:11:00 AM UTC-5, Kimberly Segers wrote: >>> >>> Thanks for the fast response, but how can I fix the negative value? >>> >>> Op maandag 14 december 2015 17:05:46 UTC+1 schreef Daniel LaLiberte: >>>> >>>> There is an option for annotations that forces all annotations to be >>>> outside the bars. >>>> >>>> annotations.alwaysOutside >>>> >>>> In Bar >>>> <https://developers.google.com/chart/interactive/docs/gallery/barchart> >>>> and Column >>>> <https://developers.google.com/chart/interactive/docs/gallery/columnchart> >>>> charts, >>>> if set to true, draws all annotations outside of the Bar/Column. >>>> Type: boolean >>>> Default: false >>>> >>>> The options are documented under: >>>> https://developers.google.com/chart/interactive/docs/gallery/barchart#configuration-options >>>> >>>> The annotations for the negative values appear to be attached to the >>>> wrong end of the bars, which is a bug. It is drawing the annotation >>>> outside the negative part of the bar, but just drawing it incorrectly. >>>> >>>> On Monday, December 14, 2015 at 10:57:36 AM UTC-5, Kimberly Segers >>>> wrote: >>>>> >>>>> Hi >>>>> >>>>> Im building a dashboard using google charts API. The thing is that >>>>> when I try to add annotations to the graph it displays weird. >>>>> I want to display the numbers inside the bars but sometimes I get >>>>> these ... inside the bar. >>>>> >>>>> >>>>> <https://lh3.googleusercontent.com/-Oi0zJIyKTX0/Vm7m0xXqOtI/AAAAAAAAAUE/xMDsAD27htc/s1600/Screen%2BShot%2B2015-12-14%2Bat%2B4.57.20%2BPM.png> >>>>> >>>>> >>>>> >>>>> >>>>> >>>>> >>>>> >>>>> >>>>> >>>>> I tried to fix it using this : >>>>> view.setColumns([0, 1, { >>>>> calc: "stringify", >>>>> sourceColumn: 1, >>>>> type: "string", >>>>> role: "annotation" >>>>> }, >>>>> >>>>> >>>>> But then the highest amount only is displayed inside the bar. I just >>>>> want to have the amounts that doesn't fit the bar, displayed outside the >>>>> bar. >>>>> >>>>> When i display all the values outside the bar, the negative values are >>>>> displayed weird. like this: >>>>> >>>>> <https://lh3.googleusercontent.com/-MFgkmTg5b0Y/Vm7me_E6yxI/AAAAAAAAAT8/1dD63_P2J8U/s1600/Screen%2BShot%2B2015-12-14%2Bat%2B4.56.12%2BPM.png> >>>>> >>>>> >>>>> >>>>> >>>>> >>>>> >>>>> >>>>> >>>>> Is there a fix for only displaying the numbers outside the bars when >>>>> it doesn't fit? >>>>> >>>>> Thanks in advance >>>>> >>>> -- > 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/1fa97f85-0b74-4da2-bd45-a6a1a39a0958%40googlegroups.com > <https://groups.google.com/d/msgid/google-visualization-api/1fa97f85-0b74-4da2-bd45-a6a1a39a0958%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/CAOtcSJNmQvwRXqERLW4xeAQQ9Mm-CrZHt1qzMEzv6db5%2Bs_N-w%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
