d3.js - Update Data Labels on onclick/ onmouseover events in C3 charts/ using D3 customization -

d3.js - Update Data Labels on onclick/ onmouseover events in C3 charts/ using D3 customization -

i'm trying update info labels on onclick or onmouseover on area chart. when hover on area block, date labels should changed ( destroy them , recreate them). there alternative in c3

here fiddle : http://jsfiddle.net/sushruthreddygade/2loc3org

here's code using c3 charts :

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) { homecoming ' '; } homecoming value; } }, onmouseover: function (d, i) { }, onmouseout: function (d, i) {}, onclick: function (d, i) { alert('on click'); }, }, tooltip: { show: false }, axis: { x: { type: 'categorized' } }, });

any advice/guidance towards solution using c3/d3 charts helpful.

thanks, sush

d3.js