Refresh data labels in onclick / onmouseover events in C3 / charts using D3 setting

I am trying to update onclick or onmouseover data labels in an area chart. When I hover over a region block, the date stamps should be changed (destroy and recreate). Is it possible to do this in c3

Here is a fiddle: http://jsfiddle.net/sushruthreddygade/2Loc3org

Here's the code using C3 diagrams:

var chart = c3.generate({
    data: {
        x: 'x',
        columns: [
            ['x', '2014-01-01', '2014-02-01', '2014-03-01', '2014-04-01', '2014-05-01', '2014-06-01', '2014-07-01'],
            ['data1', 190, 200, 190],
            ['data2', null,null,130, 130, 140],
            ['data3', null,null,null,null, 10, 20, 40]
        ],
            types: {
            'data1' : 'area-spline',
            'data2' : 'area-spline',
            'data3' : 'area-spline'
        },
        labels: {
                format: function (value, id) {
                    if (value === null) {
                        return ' ';
                    }
                    return value;
                }
          }, 
        onmouseover: function (d, i) { },
        onmouseout: function (d, i) {},
        onclick: function (d, i) {
            alert('On click');
        },
    },
    tooltip: {
                    show: false
    },
    axis: {
        x: {
            type: 'categorized'
        }
    },
});

      

        
        
        
      

    

Any tips / tricks for a solution using c3 / d3 charts would be really helpful.

Thanks, Sush