1

I've implemented a VueJS wrapper for Google Charts called vue-google-charts and I'm looking to solve a tool tip scenario.

I'm looking to customize a PieChart tooltip by leveraging toolip: {isHtml: true} which is set here in this options directive, :options="chartDonutOptions".

The data looks as such:

chartDonutData: [
['Stage', 'Percent', 'Tooltip'],
['Data 1, null, ''],
['Data 2, null, ''],
['Data 3, null, ''],
['Data 4, null, ''],
['Data 5, null, '']
]

Note the empty strings on position 2 after null. When I make an API call to update this object, I assign values to both the null and empty string positions. However, when I update string values into those areas, I cannot get them to display when I interact with each slice of the pie.

Only position 0 and 1 of the array displays:
Data 1 15.743 (15.7%)

I expect position 0, 1 and 2 of each row to display:
Data 1 15.743 (15.7%) My updated string here!

In my searches, a lot of comments suggest on assigning a role to the column.

I'm curious on how you set that with respect to VueJS/vue-google-charts. Please advise!

markreyes
  • 1,249
  • 1
  • 13
  • 27

1 Answers1

1

try changing the tooltip column heading to an object. 

['Stage', 'Percent', {type: 'string', role: 'tooltip', p: {html: true}}],
WhiteHat
  • 59,912
  • 7
  • 51
  • 133
  • This partially works but only the updated string displays in the respective tooltip when interacting with a pie slice. However, this suggestion is headed in the right direction. – markreyes Jan 10 '20 at 18:27
  • not sure I understand. what part about this isn't working? – WhiteHat Jan 10 '20 at 18:48
  • I need "Data 1 15.743 (15.7%) My updated string here!" this to display but only get this "My updated string here!" displaying in the tooltip. – markreyes Jan 10 '20 at 19:02
  • sounds like maybe you are trying to append custom info to the default tooltip. but that's not how it works. if you supply a value in the tooltip column, then only that value is displayed. and the default tooltip is removed. you will need to supply everything you want to be displayed... – WhiteHat Jan 10 '20 at 19:14
  • That makes sense. I'd essentially be capturing all those values I need and pumping it into that very object from your solution, yes? And since it's an HTML display, I can style accordingly. – markreyes Jan 10 '20 at 19:15
  • 1
    you wouldn't actually change the object in the header, you would just supply the entire html string as the value of the tooltip column on each row. [here is an example](https://stackoverflow.com/a/38306489/5090771) – WhiteHat Jan 10 '20 at 19:19