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.
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
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With