Over a million developers have joined DZone.

Adding Multiple Axis Labels to a Google Chart

Recently I've been working on a project using Google Charts API and I absolutely love it. It makes pretty graphs and shows data really nicely - and it's very painless. I did trip over a little trick today though which took me a little while to work out, so I thought I'd share it here: how to add two levels of label to an axis.

The axes in Google Charts are a bit interesting, because what they display bears absolutely no resemblance to what data is there - you label the axes separately, even if they are numbers. To label multiple things - in this example a scale and some units, you simply specify the axis more than once. To specify which axes should be shown, use chxt (CHart aXis Title) and set something like this:

Then add the labels as required, for example:


This produces a graph like this:

You can then add labels (using chxl) and ranges (uses chxr) to your axes as you wish - and even add axis labels to the top and right hand graph edges, using the t and r axes, with as many of each as you'd like, and using their list position as a parameter to the range/label settings. I hope this is useful to someone, as it took me a little bit of research to figure it out.

Published at DZone with permission of Lorna Mitchell, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}