CODEWITHSUNDEEP
chartsgoogle-visualization
jrennie
jrennie

Reputation: 1957

How to control x-axis tooltip in Google charts?

I made a chart of seasonal average temperatures with the Google chart API:

enter image description here

I'm using the 'date' type for the x-axis. I picked an arbitrary year (2001) since it's irrelevant. I customized the x-axis label to only show the month. I'd like the tooltip to only show month and day. I tried creating a column after the x-axis with type 'string' and role 'tooltip', but I didn't see a change. I'm guessing that I could create a tooltip for each of the three (y-axis) data columns. But, I'm wondering if there's an easier way.

Upvotes: 5

Views: 1673

Answers (1)

WhiteHat
WhiteHat

Reputation: 61275

each cell in the data table has a value and a formatted value

the tooltip will always display the formatted value

if the column hasn't been formatted, the tooltip will display the default format

to change, simply format the first column...

see following working snippet... 

google.charts.load('current', {
  callback: function () {
    drawChart();
    window.addEventListener('resize', drawChart, false);
  },
  packages:['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Date', 'y1', 'y2', 'y3'],
    [new Date(2001, 0, 1), 1000, 400, 200],
    [new Date(2001, 1, 2), 1170, 460, 250],
    [new Date(2001, 2, 3), 660, 1120, 300],
    [new Date(2001, 3, 4), 1030, 540, 350]
  ]);

  // format first column
  var format = new google.visualization.DateFormat({
    pattern: 'MMM d'
  });
  format.format(data, 0);

  var options = {
    hAxis: {
      format: 'MMM'
    },
    pointSize: 6
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 5

Related Questions