Edv Beq Edv Beq - 1 year ago 144
Java Question

How to fill between two AreaCharts in JavaFX?

The Area Chart in JavaFX fills the area between the data line and the zero y-axis.

I would only like to know how to fill between two Area Charts.

More Details:

I am generating a bunch of random walks. Then, I create three different XYCharts for the Paths, the mean, and the mean +/- std. deviation. Finally, I use a StackPane to place each chart on top of each other with transparent background.

The order of the charts has to be the following:
1. Simulated paths chart on the very back (LineChart).
2. Std. Deviation chart (AreaChart).
3. The mean chart on top (LineChart).

Pictures - highlighting the problem.

enter image description here
enter image description here

How can I accomplish this? CSS is preferred.

Answer Source

I managed to achieve the result using -fx-blend-mode property. Here is an example for two area charts:

public void start(Stage stage) throws Exception {

    final NumberAxis xAxis = new NumberAxis();
    final NumberAxis yAxis = new NumberAxis();
    final AreaChart<Number,Number> lineChart =
            new AreaChart<>(xAxis,yAxis);


    XYChart.Series series1 = new XYChart.Series();
    series1.getData().add(new XYChart.Data(0, 0));
    series1.getData().add(new XYChart.Data(20, 20));

    XYChart.Series series2 = new XYChart.Series();
    series2.getData().add(new XYChart.Data(0, 0));
    series2.getData().add(new XYChart.Data(20, 10));

    Scene scene  = new Scene(lineChart,800,600);


And the css in test.css:

.default-color0.chart-series-area-fill {
    -fx-fill: #FF0000;
    -fx-blend-mode: difference;
.default-color1.chart-series-area-fill {
    -fx-fill: #FF0000;
    -fx-blend-mode: difference;

And the result:
CSS for screen/multiply:

.default-color0.chart-series-area-fill {
    -fx-fill: rgb(0,178,0);
    -fx-blend-mode: screen;

.default-color1.chart-series-area-fill {
    -fx-fill: rgb(255,246,255);
    -fx-blend-mode: multiply;


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download