Why is my LineChart x-axis failing to sort?

Question

I have an instance of LineChart for displaying information in a line chart, but it is failing to sort the x-axis correctly.

public class Main extends Application {

@Override public void start(Stage stage) {

    stage.setTitle("Line Chart Sample");
    final CategoryAxis xAxis = new CategoryAxis();
    final NumberAxis yAxis = new NumberAxis();
    xAxis.setLabel("Month");
    final LineChart<String,Number> lineChart =
            new LineChart<String,Number>(xAxis,yAxis);

    lineChart.setTitle("Stock Monitoring, 2010");

    XYChart.Series series1 = new XYChart.Series();
    series1.setName("Portfolio 1");

    series1.getData().add(new XYChart.Data("4", 12.15));
    series1.getData().add(new XYChart.Data("7", 11.25));
    series1.getData().add(new XYChart.Data("10", 3.00));
    series1.getData().add(new XYChart.Data("14", 1.60));
    series1.getData().add(new XYChart.Data("19", 1.05));
    series1.getData().add(new XYChart.Data("25", 26.30));
    series1.getData().add(new XYChart.Data("26", 7.50));
    series1.getData().add(new XYChart.Data("27", 4.05));
    series1.getData().add(new XYChart.Data("28", 4.00));

    XYChart.Series series2 = new XYChart.Series();
    series2.setName("Portfolio 2");
    series2.getData().add(new XYChart.Data("7", 21.75));
    series2.getData().add(new XYChart.Data("28", 13.20));

    XYChart.Series series3 = new XYChart.Series();
    series3.setName("Portfolio 3");
    series3.getData().add(new XYChart.Data("2", 5.60));
    series3.getData().add(new XYChart.Data("3", 7.70));
    series3.getData().add(new XYChart.Data("10", 25.85));
    series3.getData().add(new XYChart.Data("19", 6.00));
    series3.getData().add(new XYChart.Data("28", 4.85));
    series3.getData().add(new XYChart.Data("29", 0.80));

    XYChart.Series series4 = new XYChart.Series();
    series4.setName("Portfolio 4");
    series4.getData().add(new XYChart.Data("9", 6.35));
    series4.getData().add(new XYChart.Data("11", 3.20));
    series4.getData().add(new XYChart.Data("19", 6.45));
    series4.getData().add(new XYChart.Data("28", 6.00));
    series4.getData().add(new XYChart.Data("29", 4.00));

    Scene scene  = new Scene(lineChart,800,600);
    lineChart.getData().addAll(series1, series2, series3, series4);

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


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

But there's something amiss with the order of the X-axis. It is sorted completely wrong. See the outcome:

Basically, if only one value from y-axis corresponds to an x value, it will be displayed in the incorrect position. The debugger is showing me that the data is added in the expected order.

By the way, each of this graphs can be displayed correctly in case if all other graphs are deleted.

Eric Eric · Accepted Answer · 2015-08-29T00:49:12

I believe it's because you're using a CategoryAxis for the xAxis. This means you're adding categories with string value labels (they just happen to be numbers). So it doesn't know that the order matters.

You can fix it by using a NumberAxis for the xAxis. Then if the decimal values of the xAxis labels (it will auto-insert tick marks) isn't what you want, you can mess around with a custom TickLabelFormatter like the one outlined in this question.

Why is my LineChart x-axis failing to sort?

1 Answers