Center bars in a bar chart

Question

I modified the bar chart example of the Oracle website and reduced the bars to 1 per series. Unfortunately the bars aren't centered above the tick marks.

Does anyone know how to get the bars centered horizontally above the tick marks?

Here's the code:

public class BarChartDemo extends Application {
    final static String austria = "Austria";
    final static String brazil = "Brazil";
    final static String france = "France";

    @Override
    public void start(Stage stage) {
        stage.setTitle("Bar Chart Sample");
        final CategoryAxis xAxis = new CategoryAxis();
        final NumberAxis yAxis = new NumberAxis();
        final BarChart<String, Number> bc = new BarChart<String, Number>(xAxis, yAxis);
        bc.setTitle("Country Summary");

        xAxis.setLabel("Country");
        yAxis.setLabel("Value");

        XYChart.Series series1 = new XYChart.Series();
        series1.setName("2003");
        series1.getData().add(new XYChart.Data(austria, 25601.34));

        XYChart.Series series2 = new XYChart.Series();
        series2.setName("2004");
        series2.getData().add(new XYChart.Data(brazil, 41941.19));

        XYChart.Series series3 = new XYChart.Series();
        series3.setName("2005");
        series3.getData().add(new XYChart.Data(france, 18722.18));

        Scene scene = new Scene(bc, 800, 600);
        bc.getData().addAll(series1, series2, series3);
        stage.setScene(scene);
        stage.show();
    }

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

And this is how it looks like:

Thank you very much!

Answer 1

Problem

The problem with your BarChart is that you are adding 3 Series, but just one unique country in each of the series. The BarChart inherently leaves space for 2 other series.

Solution

The correct way of achieving this is using one XYChart.Series and later, add colors to each of the bars. Here is a sample application, which does the same.

public class BarChartDemo extends Application {
    final static String austria = "Austria";
    final static String brazil = "Brazil";
    final static String france = "France";

    @Override
    public void start(Stage stage) {
        stage.setTitle("Bar Chart Sample");
        final CategoryAxis xAxis = new CategoryAxis();
        final NumberAxis yAxis = new NumberAxis();
        final BarChart<String, Number> bc = new BarChart<String, Number>(xAxis, yAxis);
        bc.setTitle("Country Summary");

        xAxis.setLabel("Country");
        yAxis.setLabel("Value");

        XYChart.Series series1 = new XYChart.Series();
        series1.setName("2003");
        final XYChart.Data<String, Number> dataAustria = new XYChart.Data(austria, 25601.34);
        final XYChart.Data<String, Number> dataBrazil = new XYChart.Data(brazil, 41941.19);
        final XYChart.Data<String, Number> dataFrance = new XYChart.Data(france, 35000.19);
        series1.getData().add(dataAustria);
        series1.getData().add(dataBrazil);
        series1.getData().add(dataFrance);
        Scene scene = new Scene(bc, 800, 600);
        bc.getData().addAll(series1);
        stage.setScene(scene);
        stage.show();
        dataAustria.getNode().setStyle("-fx-bar-fill: CHART_COLOR_1;");
        dataBrazil.getNode().setStyle("-fx-bar-fill: CHART_COLOR_2;");
        dataFrance.getNode().setStyle("-fx-bar-fill: CHART_COLOR_3;");
    }

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

The output looks something that you are looking for:

Note : You need to apply style to the nodes after they have been displayed on the Stage. Alternatively, you can use xyChartData.nodeProperty().addListener() and apply style into it.

dataAustria.nodeProperty().addListener((ov, oldNode, newNode) -> {
    if(null != newNode) {
        newNode.setStyle("-fx-bar-fill: red;");
    }
});