Change label color in c3js (c3.js)

Question

I have a very simple c3js pie chart, but the white labels get lost inside the yellow slice of the pie (hast to be that color). Is there any way to change the color of just that label? Alternatively, is there a way to change the color of all labels?

      var chart = c3.generate({
    data: {
      columns: [
        ['PC', 25077394],
        ["Tablet", 3240595],
        ["Mobile", 6427981],
      ],
      type : 'pie'
    },
    legend: {
    position: 'bottom'

},
    axis: {
      x: {
        label: 'Sepal.Width'
      },
      y: {
        label: 'Petal.Width'
      }
    },
  });

  setTimeout(function () {
    chart.data.colors({PC: '#2C9AB7',Tablet: '#FEBE12', Mobile: '#DB3A1B'});
  }, 1000);

Answer 1

You can do it with css;

To only change the yellow one you could declare the following class:

.c3-target-Tablet text {
   fill: black;
}

to paint them all in black you can do something as this (consider refining it if you don't want it to apply to every chart!):

.c3-chart-arc text {
    fill: black;
}

Answer 2

You can also change the colors using D3.

for example:

d3.select(".c3-target-PC > text").style("fill",#2C9AB7);

you could also use an array of colors:

var colors = [['PC','#2C9AB7'],['Table','#FEBE12'],['Mobil','#DB3A1B']];
d3.select(".c3-target-"+colors[0][0]+" + " > text").style("fill",colors[0][1]);

or even use a loop...

var colors = [['PC','#2C9AB7'],['Table','#FEBE12'],['Mobil','#DB3A1B']];
for(var i = 0; i < colors.length; i++){
  d3.select(".c3-target-"+colors[i][0]+" > text").style("fill",colors[i][1]);
}