Styling X and Y axis font color in charts using JavaFX 2.x CSS

Is there a way to change the font color of both X and Y axes?

In my search through the css reference for fonts, I only found properties like font-size, font-style, and font-weight.

font-size, font-style and font-weight

I attempted to use -fx-font-color but it had no effect.

Any assistance would be greatly appreciated.

Edit:

This is what I have tried:

Set<Node> axisNode = lineChart.lookupAll(".axis");
        for(final Node axis : axisNode){

            axis.setStyle("-fx-minor-tick-visible:false;");
            axis.setStyle("-fx-font-size: 8;")
            axis.setStyle("-fx-font-color: red;");
        }

I am looking for a solution that involves using only

 color:#008800;

Answer №1

It seems like you're looking to modify the font color of the chart axis. To achieve this, you need to include the following code snippet in your CSS file:

.axis-label { -fx-text-fill: #008800; }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Repositioning a variable number of divs as the cursor hovers over the target area

Can anyone show me how to generate div elements in a loop using jQuery and change their position with the "mouseover" function? I've tried some code, but the positioning isn't changing correctly. Any suggestions on what needs fixing? var r, g, ...

Alter the background shade of an item as it is added or removed from a multi-select list and transferred to another list

Is there a way to visually represent the movement of items between two multi-select lists? I have one list on the right and one on the left, and when objects move from right to left, I want them to have a red background (indicating removal) and if they mov ...

Utilize JavaScript to implement CSS using an "if" statement

I am currently working on implementing iOS web app properties into my website. My goal is to create a <div> at the top of the page and apply specific CSS styles when a certain condition is met in a JavaScript script. Unfortunately, I am facing issue ...

Having trouble displaying image using absolute path in Express

Currently, I am developing a NodeJS application and have encountered an issue with a div element that has a background-image set in an external CSS file. Surprisingly, the CSS file functions perfectly when tested independently, and the background image dis ...

Using Percentage-Based Margin in React-Native

I've encountered a problem in my React Native project where using a percentage value for the margin style attribute seems to shrink the height of one of my View components. However, if I switch to using an absolute value, the issue disappears and ever ...

What is the best way to incorporate width adjustments in an image source for a responsive website?

Currently learning CSS and experimenting with it on an HTML page. For reference, I'm using this link. Encountering an issue with a responsive header image that adjusts size based on device (small on mobile, large on desktop). Is it possible to achiev ...

Creating a responsive bootstrap card-tall for mobile devices

I'm currently using Bootstrap cards to create a gallery-like display of images. To style the images, I'm also utilizing the card-tall class. Since these images are posters, they naturally occupy a lot of space. Here's how it appears on the ...

Errors with pointer events occurring within nested iframes on Chromium 78

At first glance, it seems like a bug specific to Chromium. I have already reported this issue in a bug report. Since progress is slow on that front, I am posting a question here primarily to see if anyone else has encountered similar or related issues and ...

Utilize a class within a Framer Motion element to incorporate animations or set initial properties

Is there a way to apply a class using Framer Motion tag in the animate and initial props? Here's an example: <motion.div initial={{ className: 'hidden' }} animate={{ className: 'visible' }} > <div>yo</div> & ...

Exploring the possibilities of customizing gutters in Bootstrap v4 Beta

Is it possible to customize grid gutters at different breakpoints? I am aware that Twitter invested millions of dollars in perfecting Bootstrap v4, and I don't expect to overhaul everything overnight. However, I am curious if there is a way to create ...

What is the procedure for modifying the height of a button in HTML?

I wanted to add a flashing "Contact Us" button to the menu bar of my website to immediately attract people's attention when they visit. Here is the javascript code I used: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&g ...

What is the best way to ensure bootstrap cards' container expands horizontally?

Currently experimenting with Bootstrap 4 cards (view more at ) My goal is to have a container with a card deck inside that stretches horizontally as I add new cards, causing a horizontal scrollbar to appear when needed. By default, when the container wid ...

The content div in CSS is causing the menu div to be displaced

I have encountered a difficulty in describing the issue at hand as I am still in the learning phase and consider myself a beginner. Within my container div, there are two other divs - one for the menu and another for the content. Both of these divs float ...

Setting up the file structure for customizing Bootstrap with Sass

Hello, I am currently setting up Bootstrap for customization using Sass. After creating an HTML page, I attempted to add my own custom properties to the custom.scss file. Unfortunately, these changes do not seem to affect my page as expected. I followed s ...

Disappearing Bootstrap 3 Dropdown Issue Caused by Tab Click

There is an issue with the drop-down menu I created: When I click on tabs like ALL or FILM, it closes all elements. To reopen, I have to click again on the button PRODUCT.dropdown-toggle. The code example looks like this: var App = function () { ...

Maintaining a Multi-page template in PhoneGap: Best practices

I'm a beginner in Hybrid app development, currently using PhoneGap and Jquery Mobile. In my app, I have around 10 separate pages such as login.html, index.html, search.html, etc. My query is whether I should include all JS and CSS files on each indivi ...

Is there a potential bug when using .fadeOut() within a hidden element?

After examining the code provided: <div class='hotel_photo_select'> Hello </div> <div class='itsHidden' style='display:none'> <div class='hotel_photo_select'> Hello </ ...

Guide to creating a parallax scrolling effect with a background image

My frustration levels have hit an all-time high after spending days attempting to troubleshoot why parallax scrolling isn't functioning for a single image on a website I'm developing. To give you some context, here's the code I've been ...

Why is my Tailwind Grid displaying elements in a horizontal layout?

<div className='grid grid-cols-12 gap-12 mb-8'> <div className='col-span-8'> <div className='box'></div> </div> <div className='col-span-4'> <d ...

What steps should I take to ensure that the login page functions properly?

Below is the HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Login Pag ...