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>

Guerrilla

You can use setTimeout to run the code with a delay: jsfiddle.net/e60o24d0/2 – Mongoloid

Yea I've managed to get workaround with setTimeout in the end, thank you anyway – Guerrilla

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>

Bargello

Could anybody explain a little more about the answer? What is the meaning to select (using d3) the elements and do nothing? How to move these elements (SVG elements?) by applying transform in javascript but not in CSS? – Houchens