CODEWITHSUNDEEP
javascriptcssc3.js
neelshiv
neelshiv

Reputation: 6385

Change label color in c3js (c3.js)

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);

Upvotes: 4

Views: 14526

Answers (3)

gothmogg
gothmogg

Reputation: 72

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]);
}

Upvotes: 1

Margaryta Viter
Margaryta Viter

Reputation: 1

The css code below was helpful for me in such a case:

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

Upvotes: 0

Sebastian Piu
Sebastian Piu

Reputation: 8008

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;
}

Upvotes: 7

Related Questions