c3js position of data labels

Question

Is there any possible way to change a positions of labels above the data in c3 bar chart? In official documentation there is well explained how to change positions of labels on x and y measurement axis with manipulation of y and x integer, but I did not found anything for data labels.

I've tried to point to it with plain d3 on which c3 is based but console.log returns me null:

d3.selectAll(".c3-texts .c3-text").each(function () {
    var yOrigin = d3.select(this).attr('y');
    console.log(yOrigin);
})

because it fires before graph generation. You can see and edit what I'm working on here:

var chart = c3.generate({
  data: {
    columns: [
      ['de', 30],
      ['da', 20],
      ['db', 50],
    ],
    groups: [
      ['de', 'da', 'db']
    ],
    type: 'bar',
    labels: {
      format: {
        y: function(v, id) {
          return id;
        },
      }
    }
  },
  grid: {
    y: {
      lines: [{
        value: 0
      }]
    }
  }
});

d3.selectAll(".c3-texts .c3-text").each(function() {
  var yOrigin = d3.select(this).attr('y');
  console.log('yOrigin:' + yOrigin);
  //d3.select(this).attr('y',100);
})

<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/c3/0.3.0/c3.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/c3/0.3.0/c3.css" rel="stylesheet" />
<div id="chart">
</div>

Answer 1

There are two ways you can affect those labels:

a. Use transform in CSS:

.c3-texts .c3-text text {
  transform: translate(-22px, 0);
}

b. Select them using D3 in the onrendered callback:

var chart = c3.generate({
    onrendered: () => {
        d3.selectAll('.c3-text').each((v) => {
            console.dir(v);
        });
    },
    data: {
        columns: [
            ['data1', 30, -200, -100, 400, 150, 250],
            ['data2', -50, 150, -150, 150, -50, -150],
            ['data3', -100, 100, -40, 100, -150, -50]
        ],
        groups: [
            ['data1', 'data2']
        ],
        type: 'bar',
        labels: true
    },
    grid: {
        y: {
            lines: [{value: 0}]
        }
    }
});

This is better than using setTimeout as you then don't have to make an arbitrary guess as to how long it'll take to render the labels before you're able to select them with D3.

var chart = c3.generate({
  onrendered: () => {
    d3.selectAll('.c3-text').each((v) => {
      console.dir(v);
    });
  },
  data: {
    columns: [
      ['data1', 30, -200, -100, 400, 150, 250],
      ['data2', -50, 150, -150, 150, -50, -150],
      ['data3', -100, 100, -40, 100, -150, -50]
    ],
    groups: [
      ['data1', 'data2']
    ],
    type: 'bar',
    labels: true
  },
  grid: {
    y: {
      lines: [{
        value: 0
      }]
    }
  }
});

.c3-texts .c3-text text {
  transform: translate(-22px, 0);
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/c3/0.3.0/c3.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/c3/0.3.0/c3.css" rel="stylesheet" />

<div id="chart">
</div>