How to make BarChart transparent

Ivan :

I'm new with javafx, and i don't know how to fix my problem with my css code to make my BarChart component transparent through background. Any solution will be appreciated.

Here my css code:

.chart{
    -fx-background-color: null; 
    -fx-alternative-column-fill-visible: false;
    -fx-alternative-row-fill-visible: false;
    -fx-content-display:bottom;
}
.axis {
    -fx-tick-mark-visible: false;
    -fx-minor-tick-visible: false;
    -fx-minor-tick-length: 0;
}
.axis-label {
    -fx-text-fill: null;
}

Image of output:

Slaw :

The following CSS will make everything in the BarChart invisible/transparent except for the bars themselves.

.bar-chart {
    -fx-alternative-row-visible: false;
    -fx-alternative-column-visible: false;
    -fx-horizontal-grid-lines-visible: false;
    -fx-vertical-grid-lines-visible:false;
    -fx-horizontal-zero-line-visible: false;
    -fx-vertical-zero-line-visible: false;
    -fx-legend-visible: false;
}

.chart-plot-background {
    -fx-background-color: transparent;
}

.axis {
    -fx-border-color: transparent;
    -fx-tick-mark-visible: false;
    -fx-minor-tick-visible: false;
    -fx-tick-labels-visible: false;
}

Here's an example using the above (assuming the file is named Main.css):

import java.util.Random;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.BarChart;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart.Data;
import javafx.scene.chart.XYChart.Series;
import javafx.scene.input.KeyCode;
import javafx.scene.input.KeyEvent;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.stage.Screen;
import javafx.stage.Stage;
import javafx.stage.StageStyle;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) {
        var scene = new Scene(new StackPane(createBarChart()), Color.TRANSPARENT);
        scene.getStylesheets().add("Main.css");

        primaryStage.initStyle(StageStyle.TRANSPARENT);
        primaryStage.setScene(scene);

        primaryStage.addEventHandler(KeyEvent.KEY_PRESSED, event -> {
            if (event.getCode() == KeyCode.ESCAPE) {
                primaryStage.close();
            }
        });

        var bounds = Screen.getPrimary().getVisualBounds();
        primaryStage.setX(bounds.getMinX());
        primaryStage.setY(bounds.getMinY());
        primaryStage.setWidth(bounds.getWidth());
        primaryStage.setHeight(bounds.getHeight());

        primaryStage.show();
    }

    private BarChart<?, ?> createBarChart() {
        var chart = new BarChart<>(new CategoryAxis(), new NumberAxis(0, 20, 1));

        var random = new Random();

        var series = new Series<String, Number>();
        for (int i = 0; i < 20; i++) {
            var category = Integer.toString(i);
            series.getData().add(new Data<>(category, random.nextInt(15)));
            ((CategoryAxis) chart.getXAxis()).getCategories().add(category);
        }

        chart.getData().add(series);
        return chart;
    }

}

And here's an image of the result:

Now, I did have to modify the CSS file slightly to make the root of the Scene transparent and get the bars to have that linear gradient look you have in your image. All I did was...

Modify this:

.root,
.chart-plot-background {
    -fx-background-color: transparent;
}

And add this:

.chart-bar {
    -fx-background-color: linear-gradient(to bottom, transparent 0%, gray 45%);
}