NVD3 Change label text color

Question

I've desperately been trying to change the label text color on the charts I'm drawing with nvd3.js - they're drawn in black, but I need them white due to the color of the page they are included on.

I'm using nvd3.js version 1.1.15BETA with d3.js version 3.3.13, integrated into my AngularJS app via the angularjs-nvd3-directives version 0.0.7.

Does anyone have any suggestions on what to do to accomplish this?

Thanks.

Teammate

Answer 1

Changing the text color in your chart, try this :

svg text {
    fill: white;
}

To change the label color in the pie chart

.nvd3.nv-pie .nv-slice text {
    fill: white !important;
}

Here is a working fiddle.

Hope it helps

Rotarian

That's a great start - it changes the text-color of the legend labels. However, the labels "inside" the chart are still black - inspecting them shows that they have an inline style with "fill=rgb(0,0,0)" :( – Teammate

What do you mean by labels "inside" the chart. Could you be a bit more specific. Are you referring to the tooltips ? What chart are you using ? – Rotarian

It's a pie chart, and it's the "value labels" or what ever they're called - screenshot: drops.isharp.dk/mwRE/cHADC8Tm – Teammate

Thanks, but it does not work. The inline styles seem to take precedence. – Teammate

I have updated the answer with a link to a working fiddle, could you put your code on a fiddle so someone can have a look. – Rotarian

I see - it's hard for me to post a working fiddle as it's part of a larger project. I'm going to acccept your answer as it's clearly supposed to work. Thanks! – Teammate

Did you try modifying your 'nv.d3.css' file source? – Rotarian

Nope, I didn't - but i'm installing all deps via bower so I would like to keep all my dependencies clean from modifications :) – Teammate

For those who are coming later, it seems that the label text is in .nv-pie, but not .nv-slice (That's just an SVG path). The labels are stored in nv-pieLabels (which is on the same level as .nv-slice) @Marcelo Olgiati has the right idea below – Parceling

Answer 2

Hope it helps:

in your controller:

$scope.callbackFunction = function(){
     return function(){
            d3.selectAll('.nv-pieLabels text').style('fill', "white");
     }
}

In your HTML (the only important thing is callback=callbackFunction()):

<nvd3-pie-chart
 data="exampleData"
 id="exampleId"
 color="colorFunction()"
 width="1100"
 height="700"
 x="xFunction()"
 y="yFunction()"
 rotateLabels="120"
 showLabels="true"
 callback="callbackFunction()">
 <svg></svg>
</nvd3-pie-chart>

Credits to:

https://github.com/cmaurer/angularjs-nvd3-directives/blob/master/examples/nvd3.callback.html & https://github.com/krispo/angular-nvd3/issues/8

Sidedress