Vertical labels with google charts API?

Question

Anyone know how to get x-axis labels to be vertical with google charts API?

I need to fit a lot of labels in a small chart.

Thanks

Answer 1

It is possible now

var options = {
  title: "Test",
   hAxis: {
        direction:-1,
        slantedText:true,
        slantedTextAngle:90 // here you can even use 180
    }
};

Answer 2

Another possible way you can "work around" this issue is to add an x axis:

chxt=x,y

could change to:

chxt=x,y,x

(Make sure anything you did to your original x axis has the same applied) then set your labels every other in one axis and every other offset by one in the other x axis (or every third depending on how long your labels are).

chx1=0:|Alpha||Gamma||Epsilon||Eta|2:||Beta||Delta||Zeta

Note the two || for an empty label between. That way on your graph the labels switch off axises and you have a little more space:

Alpha    Gamma    Epsilon    Eta
    Beta      Delta      Zeta

Answer 3

I've not find a way to rotate the axis, however, what I've done is shorten the labels and then create a legend to explain what the labels actually represent.

Click here for a sample Google chart.

Answer 4

Add parameter options with slantedtextangle:90 degree to show label vertically

var options ={ hAxis: {title: "Years" , direction:-1, slantedText:true, slantedTextAngle:90 }}

Answer 5

The API does not provide anyway to get verticle x-axis labels (unless i missed it cause i need it too) what we did was a combination of datapoint point labels and regular x-axis labels - not perfect but works

Might try something like Dundas charts if you need more control

Answer 6

The trick is in the chartArea.height = 300 and chartArea.top = 100, height:600

var options = {
    title: 'Motivation and Energy Level Throughout the Day',
    isStacked: true,
    height:600,
    chartArea: {
        height:300,
        top:100,
    },
    hAxis: {
      title: 'Departamentos',
      titleTextStyle: {
        color: '#FF0000',            
      },

      slantedText:true,
      slantedTextAngle:45,

    },
    vAxis: {
      title: 'Kits'
    }
  };