Perhaps a simple CSS question

Perhaps a simple CSS question
0

#1

I just completed the Data Visualization Scatter Plot project but have one CSS issue that’s bothering me: I can’t get the text in my legend to change color.

The project is at: https://codepen.io/tpmc123/pen/QVxZdw?editors=1111

And here’s a screen grab, showing the problem.

I’m able to control the font-family and font-size of said text, but not the color. I included color: white; in :root, and it changed the rest of the text’s color. I’ve also tried specifying color: white by class and id. No luck.

Any idea what’s going on here?


#2

Get rid of the .attr(“style”, “white”) on both of the legend text elements and just modify your CSS .legend-text class to use the fill property instead of color property.


#3

Since you’re using SVG elements, you cannot style it like a regular text. You can use .style("fill", "white"); or style it on CSS with fill property as Randell mentioned.


#4

Thx @RandellDawson, @DriftingSteps. That did the trick.