Skip to content Skip to sidebar Skip to footer

Turn A Stacked Column Google Chart Into A Waterfall Chart

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

Solution 1:

Use the option enableInteractivity: false on the desired series.

series:{0: {enableInteractivity: false}} // Serie 0 is the first serie in your array declaration

And set the opacity to zero :

var data = google.visualization.arrayToDataTable([
    ['Genre', 'Label1', {
        role: 'annotation',
        role: 'style'
    }, 'Label2', {
        role: 'annotation',
        role: 'style'
    }],
    ['column1', 5, 'opacity: 0', 11, 'opacity: 0.2'],
    ['column2', 5, 'opacity: 0', 12, 'opacity: 0.2'],
    ['column3', 5, 'opacity: 0', 13, 'opacity: 0.2'],
    ['column4', 5, 'opacity: 0', 14, 'opacity: 0.2'],
    ['column5', 5, 'opacity: 0', 15, 'opacity: 0.2'],
    ['column6', 5, 'opacity: 0', 26, 'opacity: 0.2']
]);

Live demo


Post a Comment for "Turn A Stacked Column Google Chart Into A Waterfall Chart"