Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

NVD3 Change label text color

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.

like image 941
nover Avatar asked Jul 04 '14 12:07

nover


2 Answers

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

like image 166
shabeer90 Avatar answered Dec 06 '22 14:12

shabeer90


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

like image 44
Marcelo Olgiati Avatar answered Dec 06 '22 15:12

Marcelo Olgiati