Google Charts tooltip trigger on hover value label

Question

I have a problem with Google Charts. I have a bar chart with some big and small values. The bars also have a value label. If I hover the bars, the tooltip will be shown. But when I hover the value label (inside or outside the bar), no tooltip is shown. So i have no possibility to show the tooltip on very small bars.

Simplified Example: https://jsfiddle.net/2d0kbLnm/40/

Do you know how to tell Google Charts to show the tooltip on hover the value labels?.

A focusTarget: 'category' enforces further informations on the tooltip, that i don't want. The x-Axis value (with a blue dot) and the y-Axis title are inserted in the tooltip. Can I prevent this? I want only show my html value. Furthermore the tooltip also hides on hovering the value label.

Thank you for any help and ideas.

heiwil

Hello I can solve one of your issues being only showing the html data in the tooltip: jsfiddle.net/2d0kbLnm/47. I edited your fiddle as you can see you'll have to add another column being for a string value of the html tooltip and in your options you'll then have to add 'tooltip: {isHtml: true},' to just show the html data. Hope this helps a bit. — mrdeadsven
Yes, in my real case I have a "isHtml: true". That works so far. But if I add "focusTarget: 'category'", the labels added again, although the option "tooltip: { isHtml: true }" is set. But thank you very much for your idea :) — heiwil
Ohh ok sorry I misunderstood the question, but your question is explained in following document : developers.google.com/chart/interactive/docs/gallery/areachart. If you go to the focustarget you can find following explanation - "In focusTarget 'category' the tooltip displays all the category values. This may be useful for comparing values of different series." So I don't think their is a way to avoid this when using focustarget 'category'. — mrdeadsven
I also think so. So i hoped that anyone knows a way to trigger the tooltip on the value label. That would fix my problem. — heiwil

WhiteHat WhiteHat · Accepted Answer · 2018-11-29T12:38:39

there is another column role that will show additional text on hover of the annotation,
it is --> role: 'annotationText'

it is not necessarily a tooltip, and will not display html,
but does appear when the annotation is hovered.

this is the only "standard" option available.

see following working snippet,
the 'annotationText' is added in a data view calculated column,
so the content may be built dynamically.
hover the annotation to see the result.

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Element', 'Saldo', {role: 'style', type: 'string'}, {role: 'annotation', type: 'string'}],
    ['Element 1', 60000.15, '#3949AB', '60,000.15 CHF'],
    ['Element 2', 14.87, '#3D5AFE', '14.87 EUR'],
    ['Element 3', -13451.31, '#cc0000', '-13,451.31 EUR'],
    ['Element 4', 0, '#42A5F5', '0 CHF']
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, 2, 3, {
    calc: function (dt, row) {
      return dt.getValue(row, 0) + ' - ' + dt.getColumnLabel(1) + ': ' + dt.getFormattedValue(row, 1);
    },
    role: 'annotationText',
    type: 'string'
  }]);

  var options = {
    legend: {
      position: 'none'
    },
    hAxis: {
      logscale: true
    },
    vAxis: {
      gridlines: {
        color: 'transparent'
      },
      textPosition: 'none'
    }
  };

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

  chart.draw(view, options);  // <-- use view to draw chart
});

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

Google Charts tooltip trigger on hover value label

1 Answers