How to start y-axis points starts from top in google charts

I'm using google charts for my project and I have requirement of a chart both x-axis and y-axis labels should start from up to bottom , So In the below code x-axis points are moved to top , And now also i want to start the Y-axis point begin from top to bottom and not bottom to top. Here I written the code below, Can any one help us.

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['line']});
      google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'Day');
      data.addColumn('number', 'Guardians of the Galaxy');
      data.addColumn('number', 'The Avengers');
      data.addColumn('number', 'Transformers: Age of Extinction');

      data.addRows([
        [1,  1, 80.8, 41.8],
        [2,  1, 69.5, 32.4],
        [3,  1,   57, 25.7],
        [4,  1, 18.8, 10.5],
        [5,  1, 17.6, 10.4],
        [6,   1, 13.6,  7.7],
        [7,   7.6, 12.3,  9.6],
        [8,  12.3, 29.2, 10.6],
        [9,  16.9, 42.9, 14.8],
        [10, 12.8, 30.9, 11.6],
        [11,  5.3,  7.9,  4.7],
        [12,  6.6,  8.4,  5.2],
        [13,  4.8,  6.3,  3.6],
        [14,  4.2,  6.2,  3.4]
      ]);

      var options = {
        chart: {
          title: 'Box Office Earnings in First Two Weeks of Opening',
          subtitle: 'in millions of dollars (USD)'
        },
        width: 900,
        height: 500,
        axes: {
          x: {
            0: {side: 'top'}
          },
          y: {
            0: {side: 'top'}
          }
        }
      };

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

      chart.draw(data, google.charts.Line.convertOptions(options));
    }
  </script>
</head>
<body>
  <div id="line_top_x"></div>
</body>
</html>

Solution

there is an axis configuration option for: direction

The direction in which the values along the axis grow. Specify -1 to reverse the order of the values.

the problem here is that Material charts do not support this option,
see Tracking Issue for Material Chart Feature Parity...

and Classic charts do not have an option to present the x-axis on top.

however, we can manually modify the chart on the 'ready' event.
to resolve, we use a Classic chart, and reverse the order of the y-axis labels.
then manually move the x-axis labels to the top.

vAxis: {
  direction: -1
}

but first, we must use the following option to create room at the top.

chartArea: {
  top: 72
},

we must also move the title up slightly, to make room for the labels.

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Day');
  data.addColumn('number', 'Guardians of the Galaxy');
  data.addColumn('number', 'The Avengers');
  data.addColumn('number', 'Transformers: Age of Extinction');
  data.addRows([
    [1,  1, 80.8, 41.8],
    [2,  1, 69.5, 32.4],
    [3,  1,   57, 25.7],
    [4,  1, 18.8, 10.5],
    [5,  1, 17.6, 10.4],
    [6,   1, 13.6,  7.7],
    [7,   7.6, 12.3,  9.6],
    [8,  12.3, 29.2, 10.6],
    [9,  16.9, 42.9, 14.8],
    [10, 12.8, 30.9, 11.6],
    [11,  5.3,  7.9,  4.7],
    [12,  6.6,  8.4,  5.2],
    [13,  4.8,  6.3,  3.6],
    [14,  4.2,  6.2,  3.4]
  ]);

  var options = {
    title: 'Box Office Earnings in First Two Weeks of Opening\nin millions of dollars (USD)',
    width: 900,
    height: 500,
    chartArea: {
      top: 72
    },
    vAxis: {
      direction: -1
    }
  };

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

  google.visualization.events.addListener(chart, 'ready', function () {
    var chartLayout = chart.getChartLayoutInterface();
    var chartBounds = chartLayout.getChartAreaBoundingBox();
    var labels = chart.getContainer().getElementsByTagName('text');
    var fontSize;
    var yCoord;
    Array.prototype.forEach.call(labels, function(label) {
      fontSize = parseFloat(label.getAttribute('font-size'));
      switch (label.getAttribute('text-anchor')) {
        // chart title
        case 'start':
          yCoord = parseFloat(label.getAttribute('y'));
          label.setAttribute('y', yCoord - fontSize);
          break;

        // x-axis labels
        case 'middle':
          label.setAttribute('y', chartBounds.top - (fontSize / 2));
          break;

        // y-axis labels
        default:
          // ignore
      }
    });
  });

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

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