Google Charts hAxis tooltip

Question

I'm using Google Charts. I'm trying to display 15 stores and the number of clicks on each one.

Now that's is working perfectly.

My issue here is in the hAxis. As you can see the stores' names are incomplete, which is fine, but when i hover on an incomplete name, the tooltip is showing me an empty yellow box as shown in the picture below.

If i select the context of this tooltip, then i can read the full name:

My question is:

Is it possible to change the text color in this tooltip in order to read it?

Thanks.

WhiteHat WhiteHat · Accepted Answer · 2017-03-24T12:39:05

to modify the axis tooltip, you can modify the following css classes...

.goog-tooltip {
  background-color: cyan;
  color: magenta;
  font-weight: bold;
}

.goog-tooltip > div {
  background-color: lime !important;
}

see following working snippet...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Year');
  data.addColumn('number', 'Q1');
  data.addColumn('number', 'Q2');
  data.addColumn('number', 'Q3');
  data.addColumn('number', 'Q4');

  data.addRow(['January 2016', 500, 100, 1200, 1000]);
  data.addRow(['February 2016', 500, 100, 1975, 1000]);
  data.addRow(['March 2016', 500, 100, 1200, 1000]);
  data.addRow(['April 2016', 500, 100, 1200, 1000]);

  // find v-axis max value
  var vAxisMax = null;
  for (var i = 1; i < data.getNumberOfColumns(); i++) {
    var range = data.getColumnRange(i);
    vAxisMax = vAxisMax || Math.ceil(range.max / 1000) * 1000;
    vAxisMax = Math.max(vAxisMax, Math.ceil(range.max / 1000) * 1000);
  }
  // add buffer for annotation
  vAxisMax += 400;

  var options = {
    backgroundColor: '#000000',
    chartArea: {
      top: 12,
      bottom: 24,
      left: 72
    },
    legend: {
      position: 'none'
    },
    colors: ['#9427E0'],
    hAxis: {
      slantedText: true,
      textStyle: {
        color: '#ffffff'
      }
    },
    vAxis: {
      title: 'Amount',
      viewWindow: {
        max: vAxisMax
      }
    },
    bar: {
      groupWidth: '90%'
    },
    annotations: {
      style: 'point',
      alwaysOutside: true
    },
    width: 1100,
    height: 300
  };

  var view = new google.visualization.DataView(data);
  view.setColumns([
    0,
    1, { calc: "stringify", sourceColumn: 1, type: "string", role: "annotation" },
    2, { calc: "stringify", sourceColumn: 2, type: "string", role: "annotation" },
    3, { calc: "stringify", sourceColumn: 3, type: "string", role: "annotation" },
    4, { calc: "stringify", sourceColumn: 4, type: "string", role: "annotation" }
  ]);

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

.goog-tooltip {
  background-color: cyan;
  color: magenta;
  font-weight: bold;
}

.goog-tooltip > div {
  background-color: lime !important;
}

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

Google Charts hAxis tooltip

2 Answers