Google Charts JS haxis label text alignment control

I’m playing with Google Charts for the first time and trying to investigate how to make a date range responsive both in terms of the screen size as well as the labels space available depending on the number of data points.

I’ve managed to knock up some sample code with line breaks in the haxis labels, but the label seems to be center aligned – is there a way to left align this? (or is there an inbuilt way to handle dates responsively already?)

var _count = 0;
var _months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    
doTest();

function doTest() {
    var dtT = '2010-01-01';
    var data = document.getElementById('data');
    data.innerHTML = '';

    var a = 0;
    var b = parseInt(document.getElementById('n').value);
    _count = b;

    var b0 = b;
    for (var d = 0; d < b0; d++) {
        var dt = new Date(dtT);
        data.innerHTML += "['" + getLabel(dt) + "', " + a + "," + b + "],";
        a++;
        b--;

        dt.setDate(dt.getDate() + 1) // tomorrow

        dtT = dt.getFullYear() + '/' + getNN(dt.getMonth() + 1) + '/' + getNN(dt.getDate());
    }
    data.innerHTML = data.innerHTML.substr(0, data.innerHTML.length - 1);

    google.charts.load('current', {
        packages: ['corechart', 'bar']
    });
             google.charts.setOnLoadCallback(drawAxisTickColors);
}
// ------------------------------------------------------------------------
function getNN(n) {
   if (n < 10) return '0' + n;
   return n;
}
// ------------------------------------------------------------------------
function getLabel(tx) {
    var date = new Date(tx);
    var d = date.getDate();
    var m = date.getMonth() + 1;
    var y = date.getYear() - 100;
    return d + ' \n' + _months[m - 1] + ' ' + y;
}

// ------------------------------------------------------------------------
function drawAxisTickColors() {

    var ww = window.innerWidth;
    var numOfdates = 35;
    var tdString = document.getElementById('data').innerHTML;

    var arr = eval("[" + tdString + "]");

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Dt');
    data.addColumn('number', 'Open');
    data.addColumn('number', 'Closed');
    data.addRows(arr);

    var options_stacked = {
            isStacked: true,
            height: 300,
            hAxis: {
                slantedText: false,
                showTextEvery: 7
            },
            legend: {
                position: 'top',
                maxLines: 3
            },
            vAxis: {
                minValue: 0
            }
        };

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

window.addEventListener('resize', drawAxisTickColors);
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<h1>Google Charts Test</h1>
Columns:<input id='n' type='number' value='66'>
<input type='button' onClick='doTest()' value='Go'>
<div id="chart_div"></div>

<table style='display:none'>
  <tr><td id="data"></td></tr>        
</table>

There is a JSFiddle on this too if you want to play with it – https://jsfiddle.net/Abeeee/d5fojtp2/

Answer

Ok, it looks like making the first column in the data as a string was the problem; changing it to date (and adjusting the test-data-maker code to suit) seems to allow the chart to auto-handle the spacing and overlaps (and negating the problem of label alignment). Note I also adding a format (format:’d/MMM/yy’) control to the hAxis array.

  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Dt');     <---- was string
  data.addColumn('number', 'Open');
  data.addColumn('number', 'Closed');
  data.addRows(arr);

See https://jsfiddle.net/Abeeee/d5fojtp2/25/ for the working code.

BUT Note, this still seems to fail when you have say 1 or 2 data points – the failure being the dates under the columns are incorrect.