How to set a background image to a JavaFX chart?

The javafx.scene.chart package provides classes to create various charts namely − line chart, area chart, bar chart, pie chart, bubble chart, scatter chart, etc.

You can create the required chart by instantiating the respective class.

Setting background image and the color

  • The -fx-background-image class of JavaFX CSS is used to set an image as a background to a chart.

  • The -fx-background-color (of the region chart-plot-background) class of JavaFX CSS is used to set the back ground color.

  • JavaFX Scene class has an observable list to hold all the required style sheets. You can get this list using the getStylesheets() method.

To set an image as a background to a chart −

  • Create a CSS file in the current package of the project sheet (say LineChart.css).

  • Set the background image using the -fx-background-image CSS class as −

.chart-plot-background {
   -fx-background-image: url("cat.jpg");
  • Set the plot color as transparent using the -fx-background-color CSS class as −

.chart-plot-background {
   -fx-background-color: transparent;
  • In the program, get the observable list of style sheets using the getStylesheets() method.

  • Add the created CSS file to the list using the add() method.


LineChart.CSS −

.chart {
   -fx-padding: 10px;
   -fx-background-image: url("cat.jpg");
.chart-plot-background {
   -fx-background-color: transparent;
.chart-vertical-grid-lines {
   -fx-stroke: #dedddc; -fx-stroke-width: 2;
.chart-horizontal-grid-lines {
   -fx-stroke: #dedddc; -fx-stroke-width: 2;
} −

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.BubbleChart;
import javafx.stage.Stage;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.layout.StackPane;
public class Example extends Application {
   public void start(Stage stage) {
      //Defining the axes
      NumberAxis xAxis = new NumberAxis(0, 100, 10);
      NumberAxis yAxis = new NumberAxis(20, 100, 10);
      //Creating the Bubble chart
      BubbleChart bubbleChart = new BubbleChart(xAxis, yAxis);
      //Prepare XYChart.Series objects by setting data
      XYChart.Series series = new XYChart.Series();
      series.getData().add(new XYChart.Data(10,30,4));
      series.getData().add(new XYChart.Data(25,40,5));
      series.getData().add(new XYChart.Data(40,50,9));
      series.getData().add(new XYChart.Data(55,60,7));
      series.getData().add(new XYChart.Data(70,70,9));
      series.getData().add(new XYChart.Data(85,80,6));
      //Setting the data to bar chart
      //Creating a Group object
      StackPane root = new StackPane(bubbleChart);
      //Setting a scene
      Scene scene = new Scene(root, 595, 300);
      stage.setTitle("Bubble Chart");
   public static void main(String args[]){