javascript - How to show custom label on pie chart using c3js? -

i want show custom label on pie chart shown in image using c3.js.

i tried change pie chart label format: {...} function. doesn't work.

here 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, need used of d3js code. i'm not familiar d3js.

i'm appreciate suggestion.

this little quick , dirty gets job done...

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

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

and 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 pass values 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>