Hiding an x/y line Chart in C3.js

I'm working with some data in C3 and generating x/y line charts, I have a set of switches that I want to use to hide using C3's chart.hide(). I had no problem doing this in my earlier trials when they were x/y line charts, but now hart.hide doesn't seem to work.

Here's the bits of code of relevance that I'm trying to get to work:

Setting up the C3 graph

var chart = c3.generate({
    bindto: '#graph',
    data: {
        xs: {
            'data1': 'x1',
            'data2': 'x2',
        },
        columns: [
            ['x1', 10, 30, 45, 50, 70, 100],
            ['x2', 30, 50, 75, 100, 120],
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 20, 180, 240, 100, 190]
        ]
    }
});

The HTML that shows the graph and toggles their views "on" and "off":

<div id="graph">
</div>
<div class="graph-sets-element">
    <core-label horizontal layout>
        <paper-toggle-button checked id="data1"></paper-toggle-button>
        <h4>Graph 1</h4>        
    </core-label>
</div>
<div class="graph-sets-element">
    <core-label horizontal layout>
        <paper-toggle-button checked id="data2"></paper-toggle-button>
        <h4>Graph 2</h4>
    </core-label>
</div>

And the JS to hide and show them all:

<script>
    [].forEach.call(
        document.querySelectorAll('paper-toggle-button'), 
        function(toggle){
            toggle.addEventListener('change',function() {
                if(this.checked) {
                    chart.show(this.id); //this works with onclick
                }

                else {
                    chart.hide(this.id);
                }
            });
        }
    );
</script>