How to use css for chart bar color in Javafx

Question

I have created a chart bar, and I wish to change the bar color according to the name of values. It has two series one shows number of green values which should be green and the other one yellow. I have also created a css file, but first problem is a get unknown property error for -fx-bar-fill in css. Beside I do not know how to call the appropriate color after creating the series? I face this warning at the time:

Mar 23, 2015 8:50:02 AM com.sun.javafx.css.parser.CSSParser parse
WARNING: CSS Error parsing file:/home/iman/workspace/AddNodeDynamicly  /bin/application/chart.css: Expected LBRACE at [1,9]

Here I create the chart

public class MostComputerizedController {
    @FXML
    private BarChart<String, Number> barChart;
    @FXML
    private CategoryAxis orgNameAxis;
    @FXML
    private NumberAxis yAxis;

    private ObservableList<String> orgNames = FXCollections
            .observableArrayList();

    private DataConstructor dc = new DataConstructor();

    @FXML
    private void initialize() {

        orgNames.addAll(dc.getSortedAssignedOrg().values());
        orgNameAxis.setCategories(orgNames);
        orgNameAxis.setLabel("Name of Organizations");
        orgNameAxis.tickLabelFontProperty().set(Font.font(10));
        yAxis.setLabel("Saturation");
        orgNameAxis.getStylesheets().add(
                getClass().getResource("/application/application.css").toExternalForm());

    }

    /*
     * *
     * Sets the organization to show the statistics for.
     * 
     * @param
     */
    public void setPersonData() {

        XYChart.Series<String, Number> series = new XYChart.Series<>();
        XYChart.Series<String, Number> seriesy = new XYChart.Series<>();
        series.setName("Green");
        seriesy.setName("Yellow");

        for (String entryOrg : dc.getSortedAssignedOrg().values()) {
            for (List<String> entryfuncType : dc.getFuncTypeOrg().values()) {
                if (entryOrg.equals(entryfuncType.get(5))
                        && entryfuncType.contains("hasType")) {

                    int yellow = Collections.frequency(entryfuncType, "yellow");
                    int green = Collections.frequency(entryfuncType, "Green");
                    int typeNumber = Collections.frequency(entryfuncType,
                            "hasType");

                    series.getData().add(
                            new XYChart.Data<String, Number>(entryOrg, green));
                    seriesy.getData().add(
                            new XYChart.Data<String, Number>(entryOrg, yellow));


                }
            }

        }

        barChart.getData().addAll(series,seriesy);
    }
}

In main I add it to stage:

public class Main extends Application {
    private Stage primaryStage;
    private BorderPane rootLayout;
    private Model model = new Model();

    @Override
    public void start(Stage primaryStage) {

        this.primaryStage = primaryStage;
        this.primaryStage.setTitle("IT-Saturation");
        initRootLayout();
        showOverView();

    }

    private void showOverView() {
        try {
            FXMLLoader loader = new FXMLLoader();

            loader.setLocation(Main.class.getResource("/view/OverView.fxml"));
            loader.setController(new OverViewController(model));

            AnchorPane overView = (AnchorPane) loader.load();
            rootLayout.setCenter(overView);

        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    private void initRootLayout() {
        try {
            FXMLLoader loader = new FXMLLoader();
            loader.setLocation(Main.class.getResource("/view/RootLayout.fxml"));
            loader.setController(new RootLayoutController(model));

            rootLayout = (BorderPane) loader.load();
            // show scene containing the root layout
            Scene scene = new Scene(rootLayout);
            scene.getStylesheets().add(
                    getClass().getResource("application.css").toExternalForm());
            primaryStage.setScene(scene);
            RootLayoutController controller = loader.getController();
            controller.setMainApp(this);
            primaryStage.show();

        } catch (IOException e) {

            e.printStackTrace();
        }

    public void showMostComputerizedStatistics() {
        try {
            // Load the fxml file and create a new stage for the popup.
            FXMLLoader loader = new FXMLLoader();
            loader.setLocation(Main.class
                    .getResource("/view/MostComputerized.fxml"));
            AnchorPane page = (AnchorPane) loader.load();
            Stage dialogStage = new Stage();

            dialogStage.setTitle("Saturation in Organizations");
            dialogStage.initModality(Modality.WINDOW_MODAL);
            dialogStage.initOwner(primaryStage);
            Scene scene = new Scene(page);
            dialogStage.setScene(scene);
            dialogStage.getScene().getStylesheets().add(
                    getClass().getResource("chart.css").toExternalForm());
            MostComputerizedController controller = loader.getController();
            controller.setPersonData();
            dialogStage.show();

        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

and this is the css file:

@CHARSET "UTF-8";

.default-color0.chart-bar {
-fx-bar-fill: green;
}

.default-color1.chart-bar {
-fx-bar-fill: yellow;
}

Answer 1

If could get rid of the css warning by using -fx-background-color instead

.default-color0.chart-bar { -fx-background-color: rgb(146,208,80); }