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

Answer 1

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>