CODEWITHSUNDEEP
google-visualization
Martin Hansen
Martin Hansen

Reputation: 2101

google chart y-axis text getting cut off (svg-tag too wide)

Im implementing a google chart feature at work, and its generally working quite nicely.

Ive notice a bug in a chart just now tho. The left-hand side of the chart (more specificly the text of the y-axis, is getting cut off.

At the moment my google chart is 460px in width, but when i look at the chart with firebug, i see that the svg-tag in the chart, is correctly set to 460 in width, but is actually 472px wide (resulting in what u can see on the image below).

https://i.sstatic.net/o5tJk.png

Funny thing is, that in a bigger display (fx. 600px wide) it works perfectly fine. And if i insert a yAxis title in the javascript, its works aswell.

I have no idea how to fix this problem, but i hope some of you guys have run into the same problem, and came out with a solution or a fix.

Picture of the normal div for drawing the chart, taken with firebug layout turned on

Picture of the svg-tag in the google chart (notice that the element is bigger than the other, and its using more space to the left that its parent element (div).

both can be found here:

https://i.sstatic.net/sZLx3.png

Regards, Martin.

Upvotes: 1

Views: 2014

Answers (1)

Martin Hansen
Martin Hansen

Reputation: 2101

Problem was that google chart calculates the positions and sized in the chart that takes font size into account.

My css overwrote the "auto" font size google chart was using (12px in my case), and i had 13px font size in my css.

Solution is to either get the specified "text" css-path's (in this case: svg g g g text) and make the text 12px (in the .css file)

Or simply set the correct font size in relation to my CSS in the javascript for google chart like so:

vAxis: {textStyle: {fontSize: 13}}

Upvotes: 0

Related Questions