Change chart color

Question

I tested this css code to change chart color but I get NPE when I run the code:

public class MainApp extends Application {

    @Override public void start(Stage stage) {
        stage.setTitle("Line Chart Sample");
        //defining the axes
        final NumberAxis xAxis = new NumberAxis();
        final NumberAxis yAxis = new NumberAxis();
        xAxis.setLabel("Number of Month");
        //creating the chart
        final LineChart<Number,Number> lineChart = new LineChart<>(xAxis,yAxis);


        // Look up first series fill
        Node node = lineChart.lookup(".default-color0.chart-series-area-fill");
        // Set the first series fill to translucent pale green
        node.setStyle("-fx-fill: linear-gradient(#f2f2f2, #d4d4d4);"
            + "  -fx-background-insets: 0 0 -1 0, 0, 1, 2;"
            + "  -fx-background-radius: 3px, 3px, 2px, 1px;");

        Node nodew = lineChart.lookup(".chart-series-area-line");
        // Set the first series fill to translucent pale green
        nodew.setStyle("-fx-stroke: #989898; -fx-stroke-width: 1px; ");



        lineChart.setTitle("Stock Monitoring, 2010");
        //defining a series
        XYChart.Series series = new XYChart.Series();
        series.setName("My portfolio");
        //populating the series with data
        series.getData().add(new XYChart.Data(1, 23));
        series.getData().add(new XYChart.Data(2, 14));
        series.getData().add(new XYChart.Data(3, 15));
        series.getData().add(new XYChart.Data(4, 24));
        series.getData().add(new XYChart.Data(5, 34));
        series.getData().add(new XYChart.Data(6, 36));
        series.getData().add(new XYChart.Data(7, 22));
        series.getData().add(new XYChart.Data(8, 45));
        series.getData().add(new XYChart.Data(9, 43));
        series.getData().add(new XYChart.Data(10, 17));
        series.getData().add(new XYChart.Data(11, 29));
        series.getData().add(new XYChart.Data(12, 25));

        Scene scene  = new Scene(lineChart,800,600);
        lineChart.getData().add(series);

        stage.setScene(scene);
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }

}

This line is the problem:

node.setStyle("-fx-fill: linear-gradient(#f2f2f2, #d4d4d4);".........);

Can you tell me how I can fix this? This css code was used in AreaChart. Now I want to use it in LineChart.

P.S

I also tried this css from the example:

http://docs.oracle.com/javafx/2/charts/css-styles.htm

Node node = lineChart.lookup(".default-color0.chart-series-line");
        // Set the first series fill to translucent pale green
        node.setStyle("-fx-stroke: #e9967a;");

But again I get NPE.

Answer 1

You have to lookup the nodes after the stage has been shown.

---

public class MainApp extends Application 
{

    @Override public void start(Stage stage) 
    {
         stage.setTitle("Line Chart Sample");

         //defining the axes
         final NumberAxis xAxis = new NumberAxis();
         final NumberAxis yAxis = new NumberAxis();
         xAxis.setLabel("Number of Month");

         //creating the chart
         final LineChart<Number,Number> lineChart = new LineChart<>(xAxis,yAxis);
         lineChart.setTitle("Stock Monitoring, 2010");

         //defining a series
         XYChart.Series series = new XYChart.Series();
         series.setName("My portfolio");

         //populating the series with data
         series.getData().add(new XYChart.Data(1, 23));
         series.getData().add(new XYChart.Data(2, 14));
         series.getData().add(new XYChart.Data(3, 15));
         series.getData().add(new XYChart.Data(4, 24));
         series.getData().add(new XYChart.Data(5, 34));
         series.getData().add(new XYChart.Data(6, 36));
         series.getData().add(new XYChart.Data(7, 22));
         series.getData().add(new XYChart.Data(8, 45));
         series.getData().add(new XYChart.Data(9, 43));
         series.getData().add(new XYChart.Data(10, 17));
         series.getData().add(new XYChart.Data(11, 29));
         series.getData().add(new XYChart.Data(12, 25));

         Scene scene  = new Scene(lineChart,800,600);
         lineChart.getData().add(series);

         stage.setScene(scene);
         stage.show();

         // Look up first series fill
         Node node = lineChart.lookup(".default-color0.chart-series-area-fill");
         // Set the first series fill to translucent pale green
         node.setStyle("-fx-fill: linear-gradient(#f2f2f2, #d4d4d4);"
             + "  -fx-background-insets: 0 0 -1 0, 0, 1, 2;"
             + "  -fx-background-radius: 3px, 3px, 2px, 1px;");

         Node nodew = lineChart.lookup(".chart-series-area-line");
         // Set the first series fill to translucent pale green
         nodew.setStyle("-fx-stroke: #989898; -fx-stroke-width: 1px; ");
    }

    public static void main(String[] args) 
    {
         launch(args);
    }

}

Answer 2

1. Make sure you refer to the css documentation for the type of node you are using to see which style classes it supports.
2. Lookups are generally not available until css styling has been applied to the node. This means, at the very least, that it must have been rendered to the screen, but it seems that on occasion it takes another frame or two. So, if you want to use a lookup, you must call it after you have called stage.show();, sometimes you need to take further steps to call it later.
3. A much better approach is to use an external style sheet. See the tutorial: there's also a specific page for styling charts.

Update (additional idea):

In Java 8 (and maybe in JavaFX 2.2: I don't have a copy of caspian.css convenient), all the data-related colors are defined in terms of the lookup colors CHART_COLOR_1 through CHART_COLOR_8. This gives a nice one-liner to set the colors, at least:

lineChart.setStyle("CHART_COLOR_1: #e9967a;");