Skip to Main Content
Forums

Java SE (Java Platform, Standard Edition)

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

LineChart and -fx-text-fill issue: how do I change the color of the labels

twasylMay 8 2012 — edited May 10 2012
Hello everyone,

I'm currently facing an issue when I'm trying to style my LineChart with some CSS. Indeed I would like to change the color of the labels of my xAxis (CategoryAxis) and yAxis (NumberAxis) but it's not working.
In my FXML file I tried to use the style attribute on my LineChart tag using: <LineChart style="-fx-text-fill: white"> with no result, the text remains black (even for the title of my chart). In order to know if the style attribute is well parsed I changed it to: style="-fx-background-color: red; -fx-text-fill: white;". The background is becoming red but the text still remains black.

Finally I tried to define a stylesheet in my controller class with the same properties (red background and white text). My stylesheet is this one: 
.chart {
    -fx-text-fill: white;
    -fx-background-color: red;
}
In my controller I do the following line in order to load my CSS file:
this.chart.getStylesheets().add(getClass().getResource("statistics-style.css").toExternalForm());
Even with this option the text remains white, while the background becomes red.

What I also tried is to put the -fx-text-file CSS property directly on my axises, but again it seems it is ignored.

I followed the steps described in Figure 8-2 of this site: http://docs.oracle.com/javafx/2/charts/css-styles.htm

Does anybody have an idea or encountered this issue?

Thank you very much,
Thierry.

PS: I'm using JFX 2.1 on MacOS X

Edited by: twasyl on May 8, 2012 7:57 AM

Edited by: twasyl on May 8, 2012 7:59 AM

Comments

Ruben Rodriguez
Answer

Hello,

Check this post:

af:query css Customization

regards,

Ruben

Marked as Answer by Sumit Yadav · Sep 27 2020
1 person found this helpful
Sumit Yadav

Hi Ruben,

I see that the css is able to change the text of the query panel buttons but it is not changing the background color

queryPanelButton.png

the css code used :

af|query div[id$='_search']{

 background-color: blue;

 color: red;

      }

af|query div[id$='_reset']{

  background-color: red;

  color: blue;

}

Any pointers ?

Thanks

Sumit

Ruben Rodriguez

Hello,

Try with background: red; instead of background-color.

regards,

Ruben.

1 person found this helpful
Sumit Yadav

Thank You Ruben !!

That worked , however i am still not able to fetch the search icon the on the search button.

Please advice:

CSS used is :

af|query div[id$='_search']{

    background:Orange ;

    color: White;

    icon:  url("../../images/search.png");

    text-decoration: none;

}

Thanks

Sumit

Ruben Rodriguez

Hello,

There might be a better way to do it but you can try with this:

af|query div[id$='_search'] {

    background: Orange;

    color: White;

    background-image: url('your url');

    background-position: 6px 6px;  // change here so your icon is in the position you want

    background-repeat: no-repeat;

    text-decoration: none;

}

you might want to fix the link inside the div so you can center the text:

af|query div[id$='_search'] a{

      margin-left:20px;  // change here

}

regards,

Ruben.

Sumit Yadav

Hi Ruben,

Thank You so much for helping me in this.

I tried the below css, but now the image is getting hidden.

af|query div[id$='_search'] {

background-image:url("../../images/search_ena.png"); /*16px x 16px*/

background-color: transparent;  /\*make the button transparent\*/

background-repeat: no-repeat;   /\* make the background image appear only once \*/

background-position: 0px 0px;   /\* equivalent to 'top left' \*/

border: none;                   /\*assuming we don't want any borders \*/

cursor: pointer;                /\*make the cursor like hovering over an \<a> element  \*/

height: 16px;                   /\*make this the size of your image  \*/

padding-left: 16px;             /\*make text start to the right of the image  \*/

vertical-align: middle;         /\*align the text vertically centered  \*/

background: orange;

/\*#ef3340;\*/

color: White;

text-shadow: none;

text-decoration: none;

border-radius: 3px;

border: none;

margin: 0;

margin-left:20px;  /\* change here \*/

}

we can see that it is occupying the space for image but not rendering .

Is the background overriding the image ? Image below:

queryPanelButton2.png

Please advise.

Thanks

Sumit

Sumit Yadav

When i remove/comments the background tag, it is rendering the image.

image:

queryPanelButton3.png

Sumit Yadav

css

....

/*background: orange;*/

    /*#ef3340;*/

    color: Black;

.....

Ruben Rodriguez

Hello,

Try to move: background: orange;

On top of: background-image:url("../../images/search_ena.png");  /*16px x 16px*/

background: orange;

background-image:url("../../images/search_ena.png");  /*16px x 16px*/


regards,

Ruben.

1 person found this helpful
Sumit Yadav

Sweet. It worked just like what we wanted.

queryPanelButton4.png

Thanks a ton !!

we are able to get hold of "Detach" button.

we want to replace with my custom detach icon but I am stuck at now is .

I not able to override the previous panelcollection's detach icon.

Image :

panelcoll1.png

Please advise.

Thanks

Sumit

Sumit Yadav

CSS:

af|panelCollection div[id$='_dchTbr']{

background: #ecebeb;

     background-image:url("../../images/search_ena.png");  /*16px x 16px*/

        background-color: transparent;  /*make the button transparent*/

    background-repeat: no-repeat;   /* make the background image appear only once */

    background-position: 2px 4px;

    text-shadow: none;

    text-decoration: none;

    border-radius: 3px;

    border: none;

    margin: 0;

}

Ruben Rodriguez

Hello,

If you want to hide the icon, you can do it like this:

af|panelCollection img[id*='_dchTbr']{

    display: none;

}

regards,

Ruben.

1 - 12
Locked Post
New comments cannot be posted to this locked post.

Post Details

Locked on Jun 7 2012
Added on May 8 2012
#css, #javafx, #javafx-2-0-and-later
4 comments
363 views