How to set a particular color as background 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-color class of JavaFX CSS is used to set a colored 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-color CSS class as −

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

• 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.

Example

color.CSS −

.chart {
   -fx-padding: 10px;
   -fx-background-color: DIMGRAY;
}
.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;
}

JavaFX Program −

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.AreaChart;
import javafx.scene.chart.CategoryAxis;
import javafx.stage.Stage;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.layout.StackPane;
public class AreaChartExample extends Application {
   public void start(Stage stage) {
      //Defining the X and Y axes
      CategoryAxis xAxis = new CategoryAxis();
      NumberAxis yAxis = new NumberAxis();
      //Setting labels to the axes
      xAxis.setLabel("Months");
      yAxis.setLabel("Rainfall (mm)");
      //Creating the Area chart
      AreaChart<String, Number> areaChart = new AreaChart(xAxis, yAxis);
      //Prepare data for the area chart
      XYChart.Series series = new XYChart.Series();
      series.getData().add(new XYChart.Data("Jan", 13.2));
      series.getData().add(new XYChart.Data("Feb", 7.9));
      series.getData().add(new XYChart.Data("Mar", 15.3));
      series.getData().add(new XYChart.Data("Apr", 20.2));
      series.getData().add(new XYChart.Data("May", 35.7));
      series.getData().add(new XYChart.Data("June", 103.8));
      series.getData().add(new XYChart.Data("July", 169.9));
      series.getData().add(new XYChart.Data("Aug", 178.7));
      series.getData().add(new XYChart.Data("Sep", 158.3));
      series.getData().add(new XYChart.Data("Oct", 97.2));
      series.getData().add(new XYChart.Data("Nov", 22.4));
      series.getData().add(new XYChart.Data("Dec", 5.9));
      //Setting the name to the line (series)
      series.setName("Rainfall In Hyderabad");
      //Setting data to the area chart
      areaChart.getData().addAll(series);
      //Creating a stack pane to hold the chart
      StackPane pane = new StackPane(areaChart);
      //Setting the Scene
      Scene scene = new Scene(pane, 595, 300);
      stage.setTitle("Area Chart");
      stage.setScene(scene);
      scene.getStylesheets().add("javafx_transformastions/color.css");
      stage.show();
   }
   public static void main(String args[]){
      launch(args);
   }
}

Output