numWhile numWhile - 4 months ago 26
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:

svg.append("g")
.attr("class", "legendLinear")
.attr("transform", "translate(0,"+(height+30)+")");
var legend = d3.legend.color()
.shapeWidth(height/4)
.shapePadding(10)
.orient('horizontal')
.scale(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!

Thanks.

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):

.legendLinear{
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

You could do using CSS:

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