Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Axis labels missing #2693

Open
smpaley opened this Issue Nov 29, 2018 · 4 comments

Comments

Projects
None yet
3 participants
@smpaley
Copy link

commented Nov 29, 2018

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:
screenshot-dashboard-old

Same chart generated using 46:
screenshot-dashboard-new

@dlaliberte

This comment has been minimized.

Copy link
Collaborator

commented Nov 29, 2018

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

This comment has been minimized.

Copy link

commented Dec 18, 2018

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

This comment has been minimized.

Copy link
Collaborator

commented Dec 18, 2018

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

This comment has been minimized.

Copy link

commented Dec 18, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.