The legend color in a JavaFX StackedBarChart does not adhere to the chart color CSS styling

Within my application, using JDK version 1.8u51, I need to assign specific colors to different data categories in a StackedBarChart. To accomplish this, I have created the following CSS:

.root{
    -fx-ok-color: darkgreen;
    -fx-critical-color: darkblue;
    -fx-warning-color: gold;
    -fx-minor-color: orange;
    -fx-major-color: red;
    -fx-undefined-color: darkgrey;  
}
.okChartBar{
    -fx-bar-fill : -fx-ok-color;
}
.warnigChartBar{
    -fx-bar-fill : -fx-warning-color;
}
.minorChartBar{
    -fx-bar-fill : -fx-minor-color;
}
.majorChartbar{
    -fx-bar-fill : -fx-major-color;
}
.criticalChartBar{
    -fx-bar-fill : -fx-critical-color;
}
.undefinedChartBar{
    -fx-bar-fill : -fx-undefined-color;
}

This CSS is then utilized in my code as shown below:

StackedBarChart barChart = new StackedBarChart(new CategoryAxis(), new NumberAxis());
barChart.setTitle("Title");
vBox.getChildren().add(1,barChart);
barChart.setAnimated(true);
barChart.getData().addAll(barChartData());
barChart.getData().forEach(data ->{
    XYChart.Series moduleSerie = (XYChart.Series)data;
    moduleSerie.getData().forEach(item ->{
        XYChart.Data item2 = (XYChart.Data)item;
        item2.getNode().getStyleClass().add(styleLink.get(moduleSerie.getName())); 
        // styleLink is a map which contains the link from the alarm type (minor, major....) to the CSS style   (minorChartbar, majorChartbar, ...)
    });
});

The resulting StackedBarChart can be viewed here.

In the displayed chart, there seems to be a discrepancy in colors between the chart areas and the legend. For instance, "Critical" should appear as blue and "Major" as red.

I am uncertain whether this inconsistency is due to a JavaFX bug or an issue within my code.

I apologize for the length of this post, but I wanted to provide as much detail as possible.

Answer №1

If you're looking for the solution, I discovered the answer by referring to 2 different questions:

  • First Source
  • Second Source

Furthermore, I found out that adding .chart-legend-item-symbol to each style class in my CSS was crucial, like so:

.okChartBar .chart-legend-item-symbol{ 
    -fx-background-color:-fx-ok-color;
 }

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

Using FlexBox for Vertical Alignment of Elements

Experimenting with FlexBox (for demonstration purposes only). I am facing a challenge in vertically centering text within the parent .top-nav-bar. While using justify-content: space-between, I have successfully aligned two elements horizontally, but I am s ...

Use the color specified within the string

Recently, we have been revamping an outdated product using VueJs. The original application utilized Spring Web Flow, where all the text editing information was stored in a string. After some research, I discovered that adding white-space: pre-line; as a ...

Invisible boundary line within the column

My task involves creating a table using div elements. The layout of the table includes two columns structured as follows: <div> <div class = "columnborder"><span>Some text for column 1</span></div> <div><span>Some ...

Incorporate a horizontal scrollbar feature within an HTML section

Currently, I am in the process of learning vue js and would like to create a layout that includes two sections. The first section should occupy 3 grids on the screen, be fixed, and not scrollable, with a division into 4 vertical parts. The second section s ...

Opt for filling background image instead of stretching it when the screen is resized

My background image resizes with the screen height but stretches when I change the width. The content that should appear below it completely covers the image. This is my current code: HTML: <div id="bg"> <img src="http://placehold.it/2560x1 ...

Creating a connection between a secondary jQuery anything slider and a distinct CSS style on a webpage

Currently, I am attempting to incorporate two anything sliders within the same webpage. My goal is to apply unique styling to each slider. Despite my efforts, I am encountering difficulties in calling upon a second style sheet without it completely overr ...

Is it possible to use velocity js to add a gradient color effect to text content?

Can I use velocity js to apply gradient color to text? I've looked at https://css-tricks.com/snippets/css/gradient-text/ My specific need is to dynamically add a changing gradient using js. Thank you in advance. ...

Website Responsiveness - inquiries for all needs

My first responsive website project has hit a roadblock, as I struggle to understand how to implement media queries effectively. Here's a snippet of my code... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x ...

Creating a centered vertical border in Tailwind between two divs can be achieved by following these steps

Hey there, I'm working on creating a timeline and I'd like to have a line intersecting each year similar to this example. My tech stack includes tailwind CSS and next.js. Although I've written some code, I can't seem to get the line ce ...

The element will display above all other elements in its parent container

I am currently developing a React application, and the code structure is set up as follows: <Div> <Div style={{maxHeight:'60vh'}}> //This section includes the code for displaying a list item. Each item has its context menu that can ...

Inserting a crisp white divider between items in breadcrumb navigation in the form of arrowheads

I have designed a unique custom breadcrumb with an arrow shape : <ol class="breadcrumb-arrow"> <li class="active"><a href="#">1. Foo<span class="arrow"></span></a> </li> <li ...

Can CSS calc() achieve modulus behavior?

Is it possible to dynamically adjust the height of an element based on screen size using calc(), while still maintaining alignment with a specified baseline grid? The height should always be a multiple of the defined variable $baseline. I've noticed ...

Exploring the functionality of CodePen's code editor in relation to developing a 2D shooting game

Recently, I created a straightforward 2D shooter game with all the code neatly organized in a single HTML file: (file_gist). When I tested the game in my chrome browser, everything worked flawlessly according to my intentions. However, upon transferring th ...

Different ways to manipulate the CSS display property with JavaScript

Having trouble changing the CSS display property to "none" using JavaScript. Check out my code: <div class="mydiv" onClick="clickDiv1()">hello</div> <div class="mydiv" onClick="clickDiv2()">hi</div> <div class="mydiv" onClick=" ...

Reduce the file size of CSS and JS files for Magento

We are facing an issue with minifying CSS and Javascript for our Magento website. Currently, the size of our website is 1.1 MB and we aim to reduce it to 1 MB or even lower if possible. I tried using the "CSS Settings" and "Javascript Settings" functions ...

Utilize the hexadecimal color code as a string within the darken function

When working with a less style, I have a string variable. @colorString: 'DADADA'; I can convert it into a color: @color: ~'#@{colorString}'; Then, I am able to use @color to define a value in a style: div { color: @color } However ...

Turn off the background color box with a single click

Whenever I click on a header menu item, the background changes along with it. Is there a way to prevent this from happening? https://i.stack.imgur.com/p6bJ9.png Take a look here ...

String iteration with Stylus

Is there a way to remove the brackets and the quotation marks when putting media queries into an object and looping over them? The code works well, but the stylus is causing the output to have unwanted characters. Here's my code: $maxBreakpoints = { ...

The Angular Material md-input-container consumes a significant amount of space

Currently, I am exploring a sample in Angular Material. It appears that the md-input-container tag is taking up a substantial amount of space by default. The output is shown below: However, I have come across the md-input-content tag, which occupies less ...

The second entry is not being styled by CSS, is there an issue with the code in this section?

I am facing a challenge while trying to set the same background image for two div elements: .abc { background: url('images/autogen.png') no-repeat 0px -133px; width: 256px; height: 256px; }; .def { background: url('images/autogen.png' ...