title: Problem with displaying Y axis title and x axis title using google chart and PHP
body: <p>i have some CSS problem related to displaying of Google chart , The problem is i am not able to view x axis title and values and also y axis title comes in middle of chart .</p>
  <p><a href="https://i.stack.imgur.com/4VNtX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4VNtX.png" alt="My Chart" /></a></p>
  <p>and here is my code :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>google.charts.load('current', {
    'packages': ['bar']
  });
  google.charts.setOnLoadCallback(drawStuff);
  
  function drawStuff() {
    var data = new google.visualization.arrayToDataTable(&lt;?php echo json_encode($data, JSON_NUMERIC_CHECK); ?&gt;);
  
    var options = {
      width: 800,
      height: 700,
  
      // legend: { position: 'none' },
      axisTitlesPosition: {
        position: 'out'
      },
      title: 'Outside Temperature',
      curveType: 'none',
      legend: {
        position: 'bottom'
      },
      chartArea: {
        top: 0,
        height: 200
      },
      hAxis: {
        slantedText: true,
        slantedTextAngle: 90
      },
      chart: {
        title: 'BA',
        subtitle: ''
      },
      axes: {
        x: {
          0: {
            side: 'bottom',
            label: 'TOTAL LOADS CREATED'
          } // Top x-axis.
        },
        y: {
          0: {
            side: 'left',
            label: 'MONTH YEAR'
          } // Top x-axis.
        }
      },
      bar: {
        groupWidth: "50%"
      }
    };
  
    var chart = new google.charts.Bar(document.getElementById('top_x_div'));
    // Convert the Classic options to Material options.
    chart.draw(data, google.charts.Bar.convertOptions(options));
  }; &lt;
  /script&gt;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code> .panel {
              padding: 0 18px;
              display: none;
              background-color: white;
              overflow: hidden;
              }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button class="accordion"&gt;ABSC&lt;/button&gt;
  &lt;div class="panel"&gt;
  
    &lt;?php
  $connection = mysqli_connect('localhost', 'root', '', 'testingoforiginal');
   =$result = mysqli_query($connection, "SELECT * FROM `loads created per month`");
    if($result){
    echo "";
  }
                                                  
  $data = array();
  $data[] = ['Month YEAR', 'TOTAL LOADS CREATED'];
                                                  if(mysqli_num_rows($result) &gt; 0 ){
                                                      while($row = mysqli_fetch_array($result)) {
                                                      $data[] = [$row['Month YEAR'], $row['TOTAL LOADS CREATED']];
  }
  }
  ?&gt;
      &lt;div id="top_x_div" style="width: 800px; height: 800px;"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>here when i click button(Colapsible button) it will open up the panel . i don't understand what is the reason for showing the axis in middle and not showing the x axis value and title .</p>