Search code examples
jqueryd3.jschartsc3

c3 bar chart chart - client want numbers above the bars

I have created a bar graph using c3 charts.

My client dont like the way it is behaving. He don't want to get the table on onmouseover.

He want the numbers to be displayed on top or bottom of the bars(Kindly refer attached screenshot).

Is it possible?

Or is it possible to have legends like Microsoft(5)

function draw_tech_chart(){ 
    var chart = c3.generate({
        bindto: "#tech_chart",
        data: {
            columns: [['Microsoft', 5],['WebApplicationDevelopment', 2],['OpenSource', 2],['Content Management ', 2],['Open Source Middleware', 1],],
            type : 'bar',
            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); }
        },size: {
          height: 250
        }               
    });

enter image description here

Solution

  • Use the labels option (set it to true). See http://c3js.org/samples/data_label.html

    So something like this should do

    function draw_tech_chart(){ 
    var chart = c3.generate({
        bindto: "#tech_chart",
        data: {
            columns: [['Microsoft', 5],['WebApplicationDevelopment', 2],['OpenSource', 2],['Content Management ', 2],['Open Source Middleware', 1],],
            type : 'bar',
            labels: true
            ...