Annotations not properly placed

[Varun Dutt]

Hi All,

I am using google charts to create stacked column chart showing total on top of each bar using annotations. However, only 2 annotations are coming inside the chart and rest are perfectly outside. If I increase the font size for annotation, few more annotation gets disturbed. But if I decrease the font size, no effect on those 2. Please see the below snap of the chart:

I used the below code to create chart:

var data = new google.visualization.DataTable(jsonData);

   var formatter = new google.visualization.NumberFormat({

pattern: '$#0.0'

});

formatter.format(data, col_annotation);

var options = {

isStacked: v_charttype,

colors: color,

animation:{

duration: 1000,

startup: true

 },

curveType: 'function',

legend: { position: 'top', alignment: 'end', textStyle: {fontSize: 8}},

chartArea: {width:"80%",height:"60%"},

hAxis: { 

title: "",

slantedText: true, 

slantedTextAngle: 45 // here you can even use 180 

},

vAxis:{

title: "",

titleFontSize: 12,

format: "$#0.0",

gridlines: {

color: 'transparent',

},

},

focusTarget: 'category',

annotations: {

alwaysOutside: true,

textStyle: {

color: '#000000',

fontSize: 8,

bold: true

}          

}

        };

// Instantiate and draw our chart, passing in some options.

var chart = new google.visualization.ColumnChart(document.getElementById(chartid));

chart.draw(data, options);

I really appreciate if someone can help me understand what's the issue or if I am missing anything.

Thanks and regards,

Varun Dutta