Hi, and sorry for the late reply. If I understand you correctly, this is indeed the case, and I'll try to explain how it came to be like that. When you specify slantedTextAngle to, say, 45 degrees, you get the top corner of the text box (which was the top-right corner of the text box before it was rotated) to be exactly below the data point (or the middle of the column, in a column chart). That looks good. If you gradually increase the angle, the same rule applies - the top corner is exactly below the data point. When you reach 90 degrees, there's no longer a top corner - there's a top edge, and the corner that used to be the top corner is now the top-left corner. Since the same rule applies, that same corner is positioned exactly below the data point. The problem is that now, unlike smaller angles, it looks weird. What you'd expect in this case is that the middle of the top edge is positioned below the data point. That will indeed look better in the case of 90 degrees, but on the other hand will cause inconsistencies with smaller angles. Should 89 degrees behave in one way and 90 degrees behave differently? Since we had no good answer to this question, we left things as is, consistent among all angles.
I'm not sure this explanation helped you in any way, but I hope it at least made you understand better. On Tue, Feb 14, 2012 at 9:36 PM, Dexter <[email protected]> wrote: > For a code like what is given below there is an offset between where > the horizontal axis labelling begins and its actual column exists. > > It is a bug I believe ... any inputs where it should be reported > > <html> > <head> > <script type="text/javascript" src="https://www.google.com/ > jsapi"></script> > <script type="text/javascript"> > google.load("visualization", "1", {packages:["corechart"]}); > google.setOnLoadCallback(drawChart); > function drawChart() { > var coldata = new google.visualization.DataTable(); > coldata.addColumn('string', 'kW (Mean Values)'); > coldata.addColumn('number', 'Sales'); > coldata.addRows([ > ['2004', 1000, 400], > ['2005', 1170, 460], > ['2006', 660, 1120], > ['2007', 1030, 540] > ]); > > var coloptions = { > width: 400, height: 240, > title: 'Solar Generation', > vAxis: {title: 'Year', titleTextStyle: {color: 'red'}}, > hAxis: {title: 'Time', titleTextStyle: {color: 'red'}, > textPosition: 'out',slantedText: 'True' , slantedTextAngle: 90} > }; > > var colchart = new > google.visualization.ColumnChart(document.getElementById('Col_Chart')); > colchart.draw(coldata, coloptions); > > } > </script> > </head> > <body> > > <h1>PAES</h1> > > <div id="Area_Chart"></div> > > <div id="Col_Chart"></div> > > > </body> > </html> > > > > > > > > > > > > > > > -- > You received this message because you are subscribed to the Google Groups > "Google Visualization API" group. > To post to this group, send email to > [email protected]. > To unsubscribe from this group, send email to > [email protected]. > For more options, visit this group at > http://groups.google.com/group/google-visualization-api?hl=en. > > -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
