Align horizontal title to top on Google LineCharts

Question

Is there any way to align the horizontal title to the top on line charts? On my case the dates should be on top and not on the bottom.

I'm trying via the axes options trying to set side:'top' (as described on https://developers.google.com/chart/interactive/docs/gallery/linechart#Top-X ), but this seems not to work at all. Any ideas on how to make it work?

My example code is the one below.

google.load('visualization', '1', {packages: ['corechart', 'line']});
google.setOnLoadCallback(drawBasic);

function drawBasic() {

    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Dates');
    data.addColumn('number', 'Numbers');


    data.addRows([
        [new Date(2015, 1, 1), 1],
        [new Date(2015, 4, 1), 10],
        [new Date(2015, 5, 1), 3],
        [new Date(2015, 8, 1), 20],
    ]);

    var options = {
        axes: {
            x: {
                0: {
                    side: 'top'
                }
            }
        }
    };

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

    chart.draw(data, options);
}

Thanks in advance.

Answer 1

Info

Hm. I changed the dates to the correct years and it seems to work just fine on my end.
Chart probably got confused when you told it to expect a date and you gave it a date 18100 years into the future. Seems fairly optimistic if the dates and values represent a sales forecast :P

Could also be that you create the chart from the google.visualization namespace instead of like in the example where they use google.charts ... not sure what the difference between the two is exactly, but when I try the other namespace, that option doesn't work.

Oh well, below is a working piece of code and a picture of the result :3
Good luck!

---

JSFiddle | Code

google.load('visualization', '1', {packages: ['corechart', 'line']});
google.setOnLoadCallback(drawBasic);

function drawBasic() {
  var data = new google.visualization.DataTable();    
  data.addColumn('date', 'Dates');
  data.addColumn('number', 'Numbers');

  data.addRows([
      [new Date(2015, 1, 1), 1],
      [new Date(2015, 4, 1), 10],
      [new Date(2015, 5, 1), 3],
      [new Date(2015, 8, 1), 20],
  ]);

  var options = {
    axes: {
      x: {
        0: {side: 'top'}
      }
    }
  };

  var chart = new google.charts.Line(document.getElementById('container'));

  chart.draw(data, options);
}

---

Result

Answer 2

You can not achieve this when using the LineChart from the corechart. You will have to use the Line (from the package Line).
If you look at the link that you've posted, you see that it says:
Note: Top-X axes are available only for Material charts (ie, those with package line).

So you can not achieve what you want with just the normal LineChart. One idea I get is that you try to calculate the position of where you want the information, and then you generate them with plain HTML. This would be a pretty dirty way to do it, and you will have to either know amount of data, or do all calculations with Javascript after calculating the chart and before drawing it.

Anyhow, I tried to hardcode an example. Try to add some rows of data to it, and you'll see that the text still looks the same.

http://jsfiddle.net/atgb7pd9/1/