Show Axes text vertically besides column in ng2-google-chart

Question

I am using ng2-google-charts - 4.0.0 version. I want to display hAxis text beside the column. I tried using slantedText and slantedTextAngle but, it does not support inside the chart. It would be good if anyone can help with it.

Answer 1

the only way to get the x-axis labels inside the chart is to use the following option.

theme: 'maximized'

however, this option will ignore the slantedText option.

another method would to hide the x-axis labels,
and use a line style annotation.
this will add a rotated label inside the bar.
we can make the actual annotation line transparent.

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', {role: 'annotation', type: 'string'}, 'y'],
    ['Alarms', 'Alarms', 100],
    ['Admin State', 'Admin State', 100],
    ['Opr. State', 'Opr. State', 100]
  ]);

  var options = {
    annotations: {
      style: 'line',
      stem: {
        color: 'transparent',
        length: 0
      }
    },
    hAxis: {
      textPosition: 'none'
    },
    isStacked: 'percent',
    legend: 'none'
  };

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

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

note: there are no options to align the annotation.
if we want the label off to the right,
you can try reducing the size of the bar, with the following option.

bar: {
  groupWidth: 20
},

or we can manually move the labels on the chart's ready event.
see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', {role: 'annotation', type: 'string'}, 'y'],
    ['Alarms', 'Alarms', 100],
    ['Admin State', 'Admin State', 100],
    ['Opr. State', 'Opr. State', 100]
  ]);

  var options = {
    annotations: {
      style: 'line',
      stem: {
        color: 'transparent',
        length: 0
      }
    },
    bar: {
      groupWidth: 20
    },
    hAxis: {
      textPosition: 'none'
    },
    isStacked: 'percent',
    legend: 'none'
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart'));

  google.visualization.events.addListener(chart, 'ready', function () {
    var chartLayout = chart.getChartLayoutInterface();
    var chartBounds = chartLayout.getChartAreaBoundingBox();
    var labels = chart.getContainer().getElementsByTagName('text');

    Array.prototype.forEach.call(labels, function(label) {
      var labelBounds = label.getBBox();
      if (label.getAttribute('text-anchor') === 'middle') {
        label.setAttribute('text-anchor', 'start');
        label.setAttribute('x', parseFloat(label.getAttribute('x')) - chartBounds.top - labelBounds.height);
        label.setAttribute('y', parseFloat(label.getAttribute('y')) + labelBounds.height);
      }
    });
  });

  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

note: this will work in angular, just need to add the ready event, the angular way.