JavaFX Coloring XYChart.Series

Question

I am trying to style my JavaFX Area-Chart, but can't find any way to set color to specific series. I know, that I can style via CSS, but i want to do it in the code also.

How can i do that? 1.) How to set a color to Area-Chart with Inline Styles?

Thank you for your help.

@Jose:

I done it before like this, but it does not work for me!

@Override
    public void start(Stage primaryStage)
    {
        final AreaChart<String, Number> areaChart = new AreaChart<>(new CategoryAxis(), new NumberAxis());

        ObservableList<XYChart.Data<String, Integer>> xyList = FXCollections.observableArrayList(
            new XYChart.Data<>("P1", 30),
            new XYChart.Data<>("P2", 40),
            new XYChart.Data<>("P3", 30));
        XYChart.Series series = new XYChart.Series(xyList);
        areaChart.getData().addAll(series);

        Button button = new Button("Change style");
        button.setOnAction(new EventHandler<ActionEvent>()
        {

            @Override
            public void handle(ActionEvent arg0)
            {
                int redColor = 0, greenColor = 127, blueColor = 195;
                double opacity = 0.3;
                areaChart.setStyle("CHART_COLOR_1: rgb(" + redColor + "," + greenColor + "," + blueColor + "); "
                    + "CHART_COLOR_1_TRANS_20: rgba(" + redColor + "," + greenColor + "," + blueColor + "," + opacity + ");");

            }
        });

        VBox root = new VBox();
        root.getChildren().addAll(button, areaChart);
        Scene scene = new Scene(root, 400, 300);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

Answer 1

This answer does not work in Java 7, because the default CSS stylesheet is Caspian, not Modena.

In Caspian these constants for the main color palette are not defined: CHART_COLOR_1 , CHART_COLOR_1_TRANS_20 ,...

So if you want to apply inline styling one way to do it is by finding the series with a lookup and apply your styling to symbols, lines and/or areas, based on their CSS selectors. For instance:

@Override
public void start(Stage primaryStage) {

    final AreaChart<String, Number> areaChart = new AreaChart<>(new CategoryAxis(), new NumberAxis());

    ObservableList<XYChart.Data<String, Integer>> xyList = FXCollections.observableArrayList(
        new XYChart.Data<>("P1", 30),
        new XYChart.Data<>("P2", 40),
        new XYChart.Data<>("P3", 30));
    XYChart.Series series = new XYChart.Series(xyList);
    areaChart.getData().addAll(series);

    Scene scene = new Scene(areaChart, 400, 300);
    primaryStage.setScene(scene);
    primaryStage.show();

    int redColor = 0, greenColor = 127, blueColor = 195;
    double opacity = 0.3;

    for(Node symbol : areaChart.lookupAll(".default-color0.chart-area-symbol")){
        symbol.setStyle("-fx-background-color: rgb(" + redColor + "," + greenColor + "," + blueColor + "), white; ");
    }
    Node line = areaChart.lookup(".default-color0.chart-series-area-line");
    line.setStyle("-fx-stroke: rgb(" + redColor + "," + greenColor + "," + blueColor + "); ");
    Node area = areaChart.lookup(".default-color0.chart-series-area-fill");
    area.setStyle("-fx-fill: rgba(" + redColor + "," + greenColor + "," + blueColor + "," + opacity + "); ");
}

EDIT

The above solution will work up to 8 series.

For any number of series this other approach will work too:

    int numSeries=10;
    final int[] redColor = new int[numSeries];
    Arrays.fill(redColor, 0);
    final int[] greenColor =new int[numSeries]; 
    Arrays.fill(greenColor, 127);
    final int[] blueColor = new int[numSeries];
    Arrays.fill(blueColor, 195);
    double opacity = 0.3;


    for(int i=0; i<numSeries; i++){
        for(Node n : areaChart.lookupAll(".series"+i)){
            n.setStyle("-fx-background-color: rgb(" + redColor[i] + "," + greenColor[i] + "," + blueColor[i] + "), white; "
                    + "-fx-stroke: rgb(" + redColor[i] + "," + greenColor[i] + "," + blueColor[i] + "); "
                    + "-fx-fill: rgba(" + redColor[i] + "," + greenColor[i] + "," + blueColor[i] + "," + opacity + "); ");
        }
    }

Answer 2

You can use this:

chart-series-area-line series<i> default-color<j>

Where is the index of the series and is the series' color index

as specificated in css reference this the same you can use with setStyle function of your areaChart

you can use this:

Node line = areaChart.lookup(".default-color0.chart-series-area-line");
line.setStyle("-fx-stroke: rgb(" + redColor + "," + greenColor + "," + blueColor + "); ");