NVD3 Change Label Text Color

Question

I was desperate to change the color of the label text on the diagrams that I draw using nvd3.js - they are drawn in black, but I need them in white because of the color of the page on which they are included,

I am using nvd3.js version 1.1.15BETA with d3.js version 3.3.13 integrated into my AngularJS application using angularjs-nvd3 directives version 0.0.7.

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

Thanks.

Answer 1

Change the color of text in a chart, try the following:

svg text { fill: white; } 

To change the label color in a pie chart

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

Here is a working fiddle .

Hope this helps

Answer 2

Hope this 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> 

Loans for:

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