C3js piechart label test

Add custom Labels for a C3js piechart, move it outside the pie and add background in color of the pie element

by k_sav

HTML

<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.9/c3.min.css" rel="stylesheet" />
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.9/c3.min.js"></script>
<div id="chart">

</div>

JavaScript

var columns = ['data11', 'data2', 'data347', 'data40098'];
var data = [150, 250, 300, 50];
var colors = ['#0065A3', '#767670', '#D73648', '#7FB2CE', '#00345B'];
var padding = 5;

var legendData = [];
var sumTotal = 0

//prepare pie data

var columnData = [];
var columnNames = {};
for (i = 0; i < columns.length; i++) {
  columnData.push([columns[i]].concat(data[i]));
  var val = (Array.isArray(data[i])) ? data[i].reduce(function(pv, cv) {
    return pv + cv;
  }, 0) : data[i];
  sumTotal += val;
  legendData.push({
    id: columns[i],
    value: val,
    ratio: 0.0
  });
}
legendData.forEach(function(el, i) {
  el.ratio = el.value / sumTotal
  columnNames[el.id] = el.id + ': ' + d3.format(",.0f")(el.value) + " = " + d3.format(",.1%")(el.ratio);
});

var chart = c3.generate({
  bindto: d3.select('#chart'),
  data: {
    columns: [
      [columns[0]].concat(data[0])
    ],
    names: columnNames,
    type: 'pie',
  },
  legend: {
    position: 'right',
    show: true
  },
  pie: {
    label: {
      threshold: 0.001,
      format: function(value, ratio, id) {
        return [id, d3.format(",.0f")(value), "[" + d3.format(",.1%")(ratio) + "]"].join(';');
      }
    }
  },
  color: {
    pattern: colors
  },
  onrendered: redrawLabelBackgrounds
});

console.log(chart.data())

function addLabelBackground(index) {
  //get label text element
  var textLabel = d3.select(".c3-target-" + columns[index] + " > text");
  //add rect to parent
  var labelNode = textLabel.node();
  if (labelNode /*&& labelNode.innerHTML.length > 0*/ ) {
    var p = d3.select(labelNode.parentNode).insert("rect", "text")
      .style("fill", colors[index]);
  }
}

for (var i = 0; i < columns.length; i++) {
  if (i > 0) {

    setTimeout(function(column) {
      chart.load({
        columns: [
          columnData[column],
        ]
      });
      //chart.data.names(columnNames[column])
      addLabelBackground(column);

    }, (i * 5000 / columnData.length), i);
  } else {
   ...