SOLVE: C3 - Labels not showing in C3 pie chart whit narrow arcs

Question

I'm working with C3 library to create a pie chart and using D3 to customize some properties that C3 don't alow.
I'm moving the labels that C3 create inside the arc in the pie outside, but when the arc is narrow the label does not appear.
I think is an internal option that disable the labels, because in normal conditions, it does not fit. How can I 'activate' again the label even when it does no fit?
Here is my code to create the chart:

function pie(d1, d2, d3, d4, d5) {
 var id = '"#C"'
 var chart = c3.generate({
  bindto: '#C',
  size: {
   width: 1275,//550,
   height: 834//350
  },
  data: {
    columns: [
     d1,
     d2,
     d3,
     d4,
     d5
    ]
  },
  type: 'pie'
 }, 
 pie: {
 label: {
 format: function(value, ratio, id)
 {
   return d3.format('')(value)
 },
 show: true,
 threshold: -1

 }
 },
 legend: {
   show: false
  }
});

And the code to move the labels outside the chart with d3.js

var pie-labels= d3.selectAll(".c3-chart-arc > text").each(function(v) {
  var label = d3.select(this);
  var pos = label.attr("transform").match(/-?\d+(\.\d+)?/g);
  var h = (pos[0]*pos[0]+pos[1]*pos[1]);
  // pos[0] is x, pos[1] is y. Do some position changes and update value
  //135000 is the radio of the chart
  label.attr("transform", "translate("+ (pos[0]/h*135000) +","+ (pos[1]/h*135000) +")");

When the data have similar values and the arcs are similar, there's no problem, but it appear while working with unequal data.

mgraham mgraham · Accepted Answer · 2017-11-08T10:11:42

The pie slice label isn't drawn if the slice doesn't reach a certain threshold, but the function that does this can be changed as so:

oninit: function () {
    this.meetsArcLabelThreshold = function () { return true; };
}

See: http://jsfiddle.net/2hsr20hm/

SOLVE: C3 - Labels not showing in C3 pie chart whit narrow arcs

1 Answers