Making c3 reactive

[FickleLife]

I have some code in a template helper:

var chart;

function chartData() {
    var data = {
        "Placed": Counts.get('placed'),
        "Refunded": Counts.get('refunded')
    }
    return data;
}


function chartRefresh() {
    chart.load({
        json: chartData()
    });
}

Template.chart_entrant_status.rendered = function() {
    chart = c3.generate({
        transition: {
            duration: 1000
        },
        bindto: 'div#chart',
        data: {
            json: chartData(),
            type : 'donut',
            onclick: function (d, i) { console.log("onclick", d, i); }
            // onmouseover: function (d, i) { console.log("onmouseover", d, i); },
            // onmouseout: function (d, i) { console.log("onmouseout", d, i); }
        },

        legend: {
            show: false
        },
        donut: {
            label: {
                format: function (value, ratio) {
                    return value;
                }
            }
        }
    });

    this.autorun(function() {
        chartRefresh();
    });
};

This works well - the chart is reactive. However I get a lot of errors in the console when the data changes

Error: Invalid value for <path> attribute d="MNaN,NaNA145.35,145.35 0 1,1 NaN,NaNLNaN,NaNA87.21,87.21 0 1,0 NaN,NaNZ"

Over and over again. I think it has something to do with the drawing of the chart when it's not created... Can anyone shed any light? Thanks