React Google Charts Custom Tooltip (AreaChart) only showing on one area

Question

I am using react-google-charts to construct an AreaChart and am adding a custom tooltip to two different areas in my chart. My data array is of the format:

['X', 'NegativeY', 'PositiveY', { role: "tooltip", type: "string", p: {html: true}}]

with my data entries being of the resulting format:

[x, y, null, 'X: ' + x ". Y: " + Y] // if y > 0
[x, null, y, 'X: ' + x ". Y: " + Y] //if y < 0

In the options dictionary, I've added the following:

tooltip: { isHtml: true, trigger: "visible" }

Currently, the custom tooltip only shows for the negative Y area, and the default Google tooltip is displayed for the positive area. I'd like the custom tooltip to also be displayed for the positive region as well. Is this possible?

Answer 1

you will need an additional tooltip column.
Each tooltip is associated with a series,
if you have two series', you need two tooltips,
and the tooltip column should follow the series column in the data table.

you will need to add a column as follows...

['X', 'NegativeY', { role: "tooltip", type: "string", p: {html: true}}, 'PositiveY', { role: "tooltip", type: "string", p: {html: true}}]

[x, y, 'X: ' + x ". Y: " + Y, null, null] // if y > 0
[x, null, null, y, 'X: ' + x ". Y: " + Y] //if y < 0