Axis labels missing

[smpaley]

Since release 46, axis labels are not showing up on some of my charts. I've attached screenshots of the same chart as generated with v.45.2 and v.46. I suspect the issue is related to the fact that the chart is being generated and initially drawn "offscreen" in a div that is not yet visible. However, even if I redraw the chart again after the div has become visible, I still don't get axis labels. If, once visible, I change the fontSize before redrawing (even if by a miniscule amount like 0.01), then the axis labels do show up, but if I change it back and redraw again, then they disappear again (is the old, defective chart being cached somehow?). The actual fontSize in question doesn't seem to matter, just whether or not it is the same as the one for which the chart was first drawn offscreen.

Chart generated using 45.2:

Same chart generated using 46:

[dlaliberte]

Thanks for doing the experiments with to narrow down the problem.

There is caching of how text labels are formatted, which factors in the fontSize and other styles. So drawing when not displayed is the root of the problem. We should probably at least avoid caching formatted values that have zero width or height, and better, we need to find a way to measure text even when it is invisible, or automatically defer rendering until the chart is displayed. But until then, the necessary fix is to defer drawing the chart yourself until it is displayed.

Why this suddenly fails for you now with the latest update is possibly because we are now doing the layout of the tick labels earlier, to ensure they can be displayed.

[ReverseEngineer8]

We experienced the same issue with our report generator which was populating a div prior to making it visible. Our solution was to change the google.charts.load's 'current' parameter to specify version '45' -- at this point, we are not sure how we can make the report div visible just so the chart's vAxis labels can be rendered.

Also, the latest version defaults to drawing minor gridlines. We couldn't find any documentation describing how to eliminate these from column charts.

[dlaliberte]

Another cause of axis ticks not showing up is that there is just not enough space for them to be drawn without cropping. The algorithm now tries more possibilities, but if nothing works out, it doesn't have any backup because it doesn't have a way to choose between the failures. I'll have to think about how to solve that. You can change how much space is available for the axis ticks with the chartArea options for top, bottom, left, and right, as well as width and height.

To eliminate the minor gridlines, you can specify minorGridlines: { count: 0 }, or make their color transparent, or require a minSpacing for minorGridlines that is usually too large, like 40.

[ReverseEngineer8]

Thank you for the response Daniel –

It would be great if the new tick functionality can be backwards compatible with version 45.2’s implementation. We have sufficient space for them to be drawn, but the labels didn’t render because of our use of an offline report div.

From: Daniel LaLiberte [mailto:notifications@github.com] Sent: Tuesday, December 18, 2018 11:00 AM To: google/google-visualization-issues Cc: ReverseEngineer8; Comment Subject: Re: [google/google-visualization-issues] Axis labels missing (#2693)

Another cause of axis ticks not showing up is that there is just not enough space for them to be drawn without cropping. The algorithm now tries more possibilities, but if nothing works out, it doesn't have any backup because it doesn't have a way to choose between the failures. I'll have to think about how to solve that.

To eliminate the minor gridlines, you can specify minorGridlines: { count: 0 }, or make their color transparent, or require a minSpacing for minorGridlines that is usually too large, like 40.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/google/google-visualization-issues/issues/2693#issuecomment-448312537 , or mute the thread https://github.com/notifications/unsubscribe-auth/Ar2KzzzPmdnuSJZ4tqDUoKXhclHg-bgMks5u6S0YgaJpZM4Y6HMv . https://github.com/notifications/beacon/Ar2KzzFBc4v0m725hBH9zYf0xuwhqn15ks5u6S0YgaJpZM4Y6HMv.gif

[akshay-kale]

any update on this? I'm facing the same issue.

[Datamance]

I have the same issue as well - is there a recommended recourse for the space/cropping issue?

[emfluenceindia]

We experienced the same issue with our report generator which was populating a div prior to making it visible. Our solution was to change the google.charts.load's 'current' parameter to specify version '45' -- at this point, we are not sure how we can make the report div visible just so the chart's vAxis labels can be rendered.

Also, the latest version defaults to drawing minor gridlines. We couldn't find any documentation describing how to eliminate these from column charts.

I have a similar issue. Let me explain. There are multiple charts being rendered on a single page using current version. For the first chart everything is being rendered perfectly. But for rest of the charts Y-axis and column values are not appearing where they are 0. Column values greater than 0 however are displaying.

I changed to version 45, which has resolved the Y-axis issues, i.e. values in Y-axis are now rendering for all charts. But column values with 0 are not resolved yet.

Any suggestion please?

Here are the screenshots (using version 45):

First chart on the page (Apr, May and Jun have values 0, which are displaying)

Second chart on the page (Apr, May and Jun have values 0, which are NOT displaying)

Third chart on the page (Apr, May and Jun have values 0, which are NOT displaying)

EDIT: Even with 45, Y-axis values are failing to load all the time. It is kind of random!!

[malykhinvi]

We noticed, that on small chart sizes we don't have problems with tick labels displaying, but on the bigger charts labels are not visible. In our case, this was caused by the increased font size of the labels. Specifying of the exact hAxis.textStyle.fontSize solved the problem for us.

[wovendan]

Same problem for me: Y axis values are NOT present in Google Sheets, whatever I do to customize the axis. This is the kind of super basic problem that makes me unable to use Google Sheets very seriously. Why isn't it fixed almost immediately? I see we can now hyperlink within text of cells but the functionality is very poor (eg no copying eg via = A2 or ="blah" & hyperlink(A3) & "blah"). Its quite pathetic, Google; does anyone work there and use your own products? I just don't understand it.

[binaryflow]

I have a slightly different issue here: the X-Axis is not printing for multiple charts on a single page. On a different page, the chart is displaying properly.

Problematic chart

Working chart

In both cases, the Y-Axis is a text field label for the year. The X-Axis values are derived from a query via PHP. I can't see anything in the code on both pages that is materially different other than the problematic code lives on a page that runs 5+ charts (corechart and bar loaded) while the working chart lives by itself on a separate page.

[emanresuwenaretne]

Is there a way to hide the Y-Axis labels all together? I don't want to show the labels and not finding a way to do it.

[GusCavallin]

Hello, The current version (version 51) is still not displaying the vertical axis labels (I am able to see those labels switching to version 45.2, so the same problem seems to persist). Will there be any attempt to fix this? Is there any simple workaround?

Version 51:

Version 45.2:

Thanks!

[GusCavallin]

Is there a way to hide the Y-Axis labels all together? I don't want to show the labels and not finding a way to do it.

Have you tried the following option? vAxis: {textPosition: 'none'}

https://developers.google.com/chart/interactive/docs/gallery/barchart

[shlommer]

I also had the same problem (affecting only the Y-axis labels) and I found a simple solution that works for me.

Generally speaking the problem is that rendering is usually happenning in a container that is not yet visible, thus I think the engine fails to properly measure and render certain elements, including axis labels.

So we need to ensure the chart is drawn only after the container has become visible with a simple setTimeout method.

var drawChart = function() {
       chart.draw(data, chartConfig);
 };

setTimeout(drawChart, 10);

10 milliseconds was just enough for my browser, but you can try a higher value.