Google图表：名称与值冲突

Question

我正在使用基于Google Chart的图形制作网站。当我将鼠标悬停在图形上以显示值时，名称将与值冲突。

如何使盒子更大？

代码：

HTML和JS

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

          function drawChart() {
            var data = google.visualization.arrayToDataTable([
              ['Día', 'Cocina', 'Calefacción','Suma'],

              <?php
                for ($i=1; $i <= $dias_mes; $i++) {
                  $suma_consumo_diario = $matriz_consumo_diario_cocina_DataValue[$i] + $matriz_consumo_diario_calefaccion_DataValue[$i];
                  echo "['".$i."',".$matriz_consumo_diario_cocina_DataValue[$i].",".$matriz_consumo_diario_calefaccion_DataValue[$i].",".$suma_consumo_diario."],";
                }
              ?>

            ]);

            var options = {
              title: 'Consumo de Gas Diario',
              hAxis: {title: 'Mes Actual',  titleTextStyle: {color: '#333'}},
              vAxis: {title: 'm3/h', minValue: 0},
              'legend':'top',
            };

            var chart = new google.visualization.AreaChart(document.getElementById('graf_1'));
            chart.draw(data, options);
          }
        </script>

        <div class="obj">
          <div id="graf_1" class="graf"></div>
        </div>

CSS：

.obj{
  border-top: solid white 2px;
  border-bottom: white solid 2px;

  height: 45%;
  width: 100%;

  margin: 1% auto;

  overflow: auto;
}

.graf{
  width: 100%;
  height: 100%;
}