I've been working on a project to replicate a waterfall chart with the use of google charts. I've managed to have 2 series of stacked columns where the first series is transparent so the second visible series seem to be floating, just as a waterfall chart would look like. The problem is that the first transparent series remains interactive and highlights on a mouse hover, with labels and annotations showing up. Can you help me figure out how to stop the first column series being detected.
I've found someone who has accomplished this but they do not mention how this has been done. http://data-ink.com/?p=612.
Here is the data section of the code:
var data = google.visualization.arrayToDataTable([
['Genre', 'Label1', { role: 'annotation', role:'style' }, 'Label2', { role: 'annotation', role:'style' } ],
['column1', 5, 'opacity: 0.2', 11, 'opacity: 0.2'],
['column2', 5, 'opacity: 0.2', 12, 'opacity: 0.2'],
['column3', 5, 'opacity: 0.2', 13, 'opacity: 0.2'],
['column4', 5, 'opacity: 0.2', 14, 'opacity: 0.2'],
['column5', 5, 'opacity: 0.2', 15, 'opacity: 0.2'],
['column6', 5, 'opacity: 0.2', 26, 'opacity: 0.2']
]);
Here is jsFiddle kindly provided by R3tep who answered my opacity question. Please note i've since reduced 3 series to 2.