How to show labels for a bar chart using c3js?

Question

I want to show labels (or maybe tips) for a bar chart by using C3.js. For a pie chart I'm doing

pieChartBottomConfig.pie = {
    label: {
        threshold: 0.001,
        format: function(value, ratio, id) {
            ratio = d3.format("%")(ratio); // format ratio
            console.log('id: ' + id);
            console.log('value: ' + value);
            console.log('ratio: ' + ratio);
            console.log([id, value, ratio].join());
            return [id, value, ratio].join(); // used to pass values to the onrender function
        }
    }
};

..and it's work. I try to do something like that

verticalBarChartConfig.bar = {
        label: {
            threshold: 0.001,
            format: function(value, ratio, id) {
                ratio = d3.format("%")(ratio); // format ratio
                console.log('id: ' + id);
                console.log('value: ' + value);
                console.log('ratio: ' + ratio);
                console.log([id, value, ratio].join());
                return [id, value, ratio].join(); // used to pass values to the onrender function
            }
        }
    };

for a bar chart, but nothing happens. Please, help me. How can I show information about every bar above the bar and permanently?

labels

Answer 1

you can do something like this to generate bar chart given the data:

c3.generate({
      bindto: "#chart",
      data: {
        type: 'bar',
        columns: [
          ['231', 8],['bar2', 0],
          ['val1', 8],['bar3', 0]
        ],
        groups: [
          ['231','bar2'],
          ['val1','bar3'] 
        ],
        labels: {
          format: function(v, id, i, j) {
            return id;
          }
        }
      },
      axis: {
        x: {
          show: false
        },
        y: {
          show: false
        }
      },
      legend: {
        show: false
      },
      transition: {
        duration: 0
      },
    });

applying css like

.c3-texts .c3-text {
    font: 30px sans-serif;
}
.c3-texts text {
    fill: black !important;
}

will generate

Answer 2

Just did like that

verticalBarChartConfig.data = {
    type: 'bar',
    columns: columnsData,
    colors: {
        data1: function(d, ...others) {
            console.dir(d);
            console.dir(others);
            return d.value < 0 ? 'red' : 'green';
        }
    },
    labels: true
};

I mean, I added labels: true .