How do I add a label for the x-axis in the tooltip of a Google line chart?

Question

If you look at this bar chart from Google's help documentation and hover over the 2011 bar, a tooltip pops up.

Notice that the y-axis is labeled "Sales: 1,500" while the x-axis has no label. How can I add a label to the x-axis so that it says "Year: 2011"?

I would prefer to use the default tooltips rather than the html tooltips.

Answer 1

there are only a couple options, when not using html tooltips...

1) use a tooltip column role and provide the content of the tooltip in the data table...

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('string', 'Year');
  dataTable.addColumn('number', 'Sales');
  dataTable.addColumn({type: 'string', role: 'tooltip'});
  dataTable.addRows([
    ['2010', 600, 'Year: 2010\nSales: 600'],
    ['2011', 1500, 'Year: 2011\nSales: 1500'],
    ['2012', 800, 'Year: 2012\nSales: 800'],
    ['2013', 1000, 'Year: 2013\nSales: 1000']
  ]);

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

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

2) use numbers instead of strings for the x-axis,
then you can use object notation to provide both the x-axis value (v:) and formatted value (f:)
{v: 2010, f: 'Year: 2010'}
the tooltip will display the formatted value by default

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('number', 'Year');
  dataTable.addColumn('number', 'Sales');
  dataTable.addRows([
    [{v: 2010, f: 'Year: 2010'}, 600],
    [{v: 2011, f: 'Year: 2011'}, 1500],
    [{v: 2012, f: 'Year: 2012'}, 800],
    [{v: 2013, f: 'Year: 2013'}, 1000]
  ]);

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(dataTable, {
    hAxis: {
      format: '0',
      ticks: dataTable.getDistinctValues(0)
    }
  });
});

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

major drawback to both options above, you cannot style the tooltip
1) nothing is bold
2) both label and value are bold (Year: 2011)

---

best results will come by using html tooltips,
following is an example of building the tooltips dynamically, using a DataView...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('string', 'Year');
  dataTable.addColumn('number', 'Sales');
  dataTable.addRows([
    ['2010', 600],
    ['2011', 1500],
    ['2012', 800],
    ['2013', 1000]
  ]);

  // build data view columns
  var viewColumns = [];
  for (var col = 0; col < dataTable.getNumberOfColumns(); col++) {
    addColumn(col);
  }
  function addColumn(col) {
    // add data table column
    viewColumns.push(col);

    // add tooltip column
    if (col > 0) {
      viewColumns.push({
        type: 'string',
        role: 'tooltip',
        calc: function (dt, row) {
          // build custom tooltip
          var tooltip = '<div class="ggl-tooltip"><div>';
          tooltip += dt.getColumnLabel(0) + ':&nbsp;<span>';
          tooltip += dt.getValue(row, 0) + '</span></div>';
          tooltip += '<div>' + dt.getColumnLabel(col) + ':&nbsp;<span>';
          tooltip += dt.getFormattedValue(row, col) + '</span></div></div>';

          return tooltip;
        },
        p: {html: true}
      });
    }
  }
  var dataView = new google.visualization.DataView(dataTable);
  dataView.setColumns(viewColumns);

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  // use data view to draw chart
  chart.draw(dataView.toDataTable(), {
    tooltip: {
      isHtml: true
    }
  });
});

.ggl-tooltip {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  font-family: Arial, Helvetica;
  font-size: 14px;
  padding: 12px 12px 12px 12px;
}

.ggl-tooltip div {
  margin-top: 4px;
}

.ggl-tooltip span {
  font-weight: bold;
}

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