7

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.

nover
  • 2,259
  • 1
  • 27
  • 27

2 Answers2

13

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

shabeer90
  • 5,161
  • 4
  • 47
  • 65
  • 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)" :( – nover Jul 04 '14 at 13:22
  • 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 ? – shabeer90 Jul 04 '14 at 13:32
  • It's a pie chart, and it's the "value labels" or what ever they're called - screenshot: http://drops.isharp.dk/mwRE/cHADC8Tm – nover Jul 04 '14 at 13:34
  • Thanks, but it does not work. The inline styles seem to take precedence. – nover Jul 04 '14 at 14:50
  • 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. – shabeer90 Jul 04 '14 at 15:17
  • 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! – nover Jul 04 '14 at 19:43
  • Did you try modifying your 'nv.d3.css' file source? – shabeer90 Jul 04 '14 at 23:47
  • Nope, I didn't - but i'm installing all deps via bower so I would like to keep all my dependencies clean from modifications :) – nover Jul 07 '14 at 11:22
  • 1
    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 – Robert Dundon Aug 29 '16 at 19:54
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

Marcelo Olgiati
  • 21
  • 2