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?
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