How to show custom label on pie chart using c3js?

Question

I want to show custom label on pie chart as shown in image by using C3.js.

I tried to change pie chart label with format: {...} function. But it doesn't work.

Here is what I tried,

var charThree = c3.generate({
    bindto: "#chartThree",
    size: {
        width: 500,
        height: 300
    },
    data: {
        colors: {
            A: 'yellow',
            B: 'red',
            C: 'green',
            D: 'orange',
            E: 'blue'
        },
        columns: [
              ['A',20],
              ['B',40],
              ['C',20],
              ['D',10],
              ['E',9]
        ],
        type: 'pie'
    },
    pie: {
        labels: {
            show: true,
            threshold: 0.1,
            format: {
               A: function (value, ratio, id) {
                   if(value=20) {
                       return "A<br/>9item<br/>20.2%";
                   }
               }
            }
        }
    }

});

I think, I need to used some of d3js code. But I'm not familiar with d3js.

I'm very appreciate for any suggestion.

Answer 1

This is a little quick and dirty but it gets the job done...

I'm saving the data as a comma separated list in the pie.label.format function, since it's not possible to display html here (to my knowledge):

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

And the actual formatting in onrendered:

  onrendered: function() {
    d3.selectAll(".c3-chart-arc text").each(function(v) {
      var label = d3.select(this);
      var data = label[0][0].innerHTML.split(',');

      var id = data[0];
      var value = data[1];
      var perc = data[2];

      d3.select(this).text("")
        .append("tspan")
        .text(id)
        .attr("dy", 0)
        .attr("x", 0)
        .attr("text-anchor", "middle").append("tspan")
        .text(parseInt(value) / 4 + " item")
        .attr("dy", "1.2em")
        .attr("x", 0)
        .attr("text-anchor", "middle")
        .append("tspan")
        .text(perc)
        .attr("dy", "1.2em")
        .attr("x", 0)
        .attr("text-anchor", "middle");
    });
  }
});

var chart = c3.generate({
  bindto: "#chart",
  size: {
    width: 500,
    height: 300
  },
  data: {
    colors: {
      A: 'yellow',
      B: 'red',
      C: 'green',
      D: 'orange',
      E: 'blue'
    },
    columns: [
      ['A', 20],
      ['B', 40],
      ['C', 20],
      ['D', 10],
      ['E', 10]
    ],
    type: 'pie'
  },
  pie: {
    label: {
      threshold: 0.1,
      format: function(value, ratio, id) {
        ratio = d3.format("%")(ratio); // format ratio
        return [id, value, ratio].join(); // used to pass values to the onrender function
      }
    }
  },
  onrendered: function() {
    d3.selectAll(".c3-chart-arc text").each(function(v) {
      var label = d3.select(this);
      var data = label[0][0].innerHTML.split(',');
      
      var id = data[0];
      var value = data[1];
      var perc = data[2];

      d3.select(this).text("")
        .append("tspan")
        .text(id)
        .attr("dy", 0)
        .attr("x", 0)
        .attr("text-anchor", "middle").append("tspan")
        .text(parseInt(value) / 4 + " item")
        .attr("dy", "1.2em")
        .attr("x", 0)
        .attr("text-anchor", "middle")
        .append("tspan")
        .text(perc)
        .attr("dy", "1.2em")
        .attr("x", 0)
        .attr("text-anchor", "middle");
    });
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.12/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css"/>
<div id="chart"></div>