numWhile numWhile - 1 year ago 157
HTML Question

How to change text color of legend in d3js graph?

Title; I'm following this tutorial on a stacked bar chart. I have a black background and wanted to change the color of the legend to white. I have already done so with the axis, but can't seem to edit the legend text. I tried

.legend {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 60%;
color: white; //added, but doesn't work

From what I can tell, this code:

.attr("class", "legendLinear")
.attr("transform", "translate(0,"+(height+30)+")");
var legend = d3.legend.color()

creates the legend, but I have no idea how to modify the text label that labels the legend.

As you can probably tell, I am very new to d3 and javascript, and am very lost.

Any help is appreciated!


EDIT: I added this to the CSS but it removed the label completely instead of making it white (you can check this by changing the background of the tutorial to gray):

fill: '#ffffff'

EDIT2: I changed it to:

.legendLinear text.label {
fill: '#fff'

and it doesn't seem to work either; the text is still black.

Answer Source

You could do using CSS:

.legendLinear text.label {
   fill: '#fff'
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download