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.

Erotomania

Answer 1

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

Crore

can you specify the rotation for a data point label? do you have an example URL you can post? thanks! – Erotomania

Nope there is nothing i have ever found to rotate any of the labels – Crore

for the viewer purpose, it is now available, see milind Morey answers. – Cooperman

Answer 2

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

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

Gusgusba

direction -1 is unrelated and will inverse the h axis – Valois

Thanks for this solution but Any idea how to wrap the text.. in my case it is big. – Deepdyed

For slanted lables: hAxis: { slantedText:true, slantedTextAngle:45 }, – Lusk

Answer 3

this is a bit of an old thread. but i was searching for this myself and came across this...

https://developers.google.com/chart/interactive/docs/gallery/areachart#Configuration_Options

Look for: hAxis.slantedTextAngle and hAxis.slantedText. Set your angle to 90 for vertical display (or anything in between for a slant).

Entranceway

Answer 4

Diagonal Text here. This is my way of doing it, I hope it will help them.

https://jsfiddle.net/8tvm9qk5/

The code:

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="chart_div"></div>

and

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawStacked);

function drawStacked() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Departamentos');
      data.addColumn('number', 'Entregados');
      data.addColumn('number', 'En Stock');

      data.addRows([
        ['abdasdasa', 925, 786],
        ['bbdasdas', 652, 156],
        ['cbdasdas', 300, 200],
        ['ddasdasb', 925, 786],
        ['edasdb', 652, 156],
        ['fasdasb', 300, 200],
        ['gdasdasdb', 925, 786],
        ['abdasdasa', 925, 786],
        ['bbdasdas', 652, 156],
        ['cbdasdas', 300, 200],
        ['ddasdasb', 925, 786],
        ['edasdb', 652, 156],
        ['fasdasb', 300, 200],
        ['gdasdasdb', 925, 786]


      ]);

      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'
        }
      };

      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }

Fuchsin

Answer 5

It is possible now

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

Palliative

Answer 6

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

Bergerac

Answer 7

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.

Vocalist

Answer 8

Yes!

Set hAxis.slantedText to true and then set hAxis.slantedTextAngle=90. Like so...

var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
    ac.draw(data, {
      title : 'Equipment Performance Chart',
      isStacked:true,
      vAxis: {
        viewWindowMode: 'explicit',
        viewWindow: {
            max: 100
            },
        title: "Percentage"
        },
      hAxis: {
        title: "Area",
        slantedText:true,
        slantedTextAngle:90
        },
      seriesType: "bars",

    });

Applicative

Answer 9

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'
    }
  };

Fuchsin

Answer 10

Use orientation: "horizontal" as an option.

const options = {
    ...... other options
    orientation: "horizontal"
};

Silhouette