Google Bar Chart custom tooltip does not work

Question

This code:

chart = new google.charts.Bar(document.getElementById('chart'));
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', '');
dataTable.addColumn('number', 'Value');
dataTable.addColumn({type: 'string', role: 'tooltip', p: {'html': true}});
var rows = [
    ['U.S.', 2, "tool"],
    ['France', 10, "tip"]
];
dataTable.addRows(rows);
chart.draw(dataTable);

does not result in a custom tooltip.

Strangely it works with other chart types.

Do you know why please?

[edit] Apparently this is not possible. Is there any other way to put a "%" symbol in the tooltip, like in this screenshot?

simply doesn't work on _Material_ charts, nor does `role: 'style'`... — WhiteHat, Apr 19 '16 at 21:51
Thanks, but Material charts are much prettier than Classics :( I edited my question in the hope we can solve the problem in another way. — Arnaud, Apr 19 '16 at 22:22

score 4 · Accepted Answer · answered Apr 19 '16 at 22:55

4

The tooltip should show the formatted value by default.
Using object notation for your values, you can provide a formatted value (f:)
along with the required value (v:)...

you can also use dataTable.setFormattedValue(...) after the table is loaded...

Example...

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

function drawChart() {
  chart = new google.charts.Bar(document.getElementById('chart'));
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('string', '');
  dataTable.addColumn('number', 'Value');
  var rows = [
      ['U.S.', {v: 2, f: '2%'}],    // add %
      ['France', {v: 10, f: '10%'}],  // add %
      ['Germany', {v: 15, f: 'whatever we want'}]   // add whatever we want 
  ];
  dataTable.addRows(rows);
  chart.draw(dataTable);
}

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

answered Apr 19 '16 at 22:55

WhiteHat

59,912
7
51
133

edit: just realized, supplying a formatted value allows you to provide any format you want. not sure if it will render html...? -- check it out... – WhiteHat Apr 19 '16 at 22:56
btw: tried versions `'42'` thru `'current'` on getting tooltip to work in _Material_ chart... – WhiteHat Apr 19 '16 at 23:01
1

Thanks a lot!! This works great, and for labels too. No it does not render HTML. – Arnaud Apr 19 '16 at 23:04
This is incredible, thank you! How did you find that out? I wonder because I'd like to see what are all the options for each chart type. I don't understand why the documentation does not cover that and why do we have multiple chart types that are actually the same? For example Bar and BarChart - each one has it's own list of options and rules... – sskular May 08 '16 at 19:03
been using google charts a while now -- `bar` is considered a [_Material Chart_](https://developers.google.com/chart/interactive/docs/gallery/columnchart#creating-material-column-charts) whereas `barchart` comes from the original `corechart` package -- as for values and formatted values, see the [DataTable](https://developers.google.com/chart/interactive/docs/reference#datatable-class) reference... – WhiteHat May 08 '16 at 20:46

Google Bar Chart custom tooltip does not work

1 Answers1

Linked