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.

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

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