c3js legend beside each Bar

Question

I am working on a stacked bar chart with c3js. How can i show the bar values with the legend permanently beside each bar? normally they are only in the tooltip.

I attached a mockup to show you what i mean:

What i have so far ( see my jsfiddle for a working example ):

 var chart = c3.generate({ bindto: '#chart', data: { columns: [ ['data1', 30], ['data2', 130], ['data3', 230], ['data4', 120], ['data5', 50], ['data6', 20], ['data7', 30], ['data8', 130], ['data9', 230] ], type: 'bar', groups: [ ['data1', 'data2', 'data3'], ['data4', 'data5', 'data6'], ['data7', 'data8', 'data9'] ] }, grid: { y: { lines: [{value:0}] } } }); 

I'm happy for every input / solution to get my problem solved :)

Cheers, Marco

Answer 1

Hi it's possible but it's not pure c3.

The way I do it is using d3.selectAll("c3-bar") in order to select all "path" elements that indicate our bars.

Then i'd add d3 code to insert a text element by the side of each bar Something like

    d3.selectAll(".c3-bars").insert("text").text(function(d){
console.info(d);
return "123";
}).attr("x","0").attr("y","50").attr("font-size","13").attr("stroke","red");

note that this is not hte code that does exactly what you need but it should give you an idea on where to go

Note that you will have to add this code to .onrender() function in the chart definition, in order to have it rendered every time.

fiddle