CODEWITHSUNDEEP
javascriptraphaelgraphael
Marty
Marty

Reputation: 39458

Change the background colour of a Raphael "Label"

If I create a Label using Raphael, the default style is a black block with white text.

How can I change the background box colour, but not the text colour? I've tried:

paper.label(x, y, value).attr("fill", colour)

but that also fills the text and I end up with invisible text.

I also can't simply change the default colour in this function because I need to have a few different ones depending on a line that it's added to:

enter image description here

Upvotes: 3

Views: 2131

Answers (3)

sacohe
sacohe

Reputation: 788

As you noticed, 

Paper.label(x, y, value).attr(
    fill : color
);

changes both the background fill color and the text fill color, resulting in invisible text.

Unspecified correctly explained that this is an array, so each portion must be altered separately, as they illustrated. However, they didn't mention the easiest way to change update both sets of attributes, so I wanted to share this tip. In order to do this, change the attributes into an array with two sets. The first element is the background, and the second is the text.

Paper.label(x, y, value).attr([{
    fill : backgroundColor
}, {
    fill : textColor
}]);

You can add any other applicable attributes to each part. Here is a working example: http://jsfiddle.net/VzpeG/1/

Upvotes: 6

Mudassir Ali
Mudassir Ali

Reputation: 8041

var r = Raphael('divID', 320, 220);
text = r.text(100,100,"Hello").attr({fill:"#fff"});​​​​
text.label().attr({fill:"#f00"});

Here's a working fiddle http://jsfiddle.net/vpGyL/216/

Set any color on text or on label both apply separately...Hope this helps !

Digging in furthur...Paper.label(x,y,text) is different from Element.label()

If you look at the source code Paper.Label(x,y,text) is a set of rectangle element & text element, so doing .attr({fill:"SomeColor"}) applies to the entire set, hence both rectangle & text share same color(Hence the invisibility).

Oh yeah If you just want to change the text color do this Raphael.g.txtattr.fill = "#yourColorCode" But this changes the text color globally on all the charts and tooltips(don't seem to be a good idea).

While Element.Label as the documentation says is takes the context element & embed in a label tooltip, basically whatever element you use, applying .label will embed it inside a rectangle

Upvotes: 0

user1752759
user1752759

Reputation: 643

I was working on a graph similar to this and used:

.attr({fill: "#EF7C4D"})

Let me know how this goes...

Upvotes: 0

Related Questions