0

I want to build a view that contains a stack pane with two LineCharts stacked one over another. The first chart(base chart) will be a normal one and the second one will have the yAxis side switched to the right side, and with a transparent background.

The problem I am having is that after adding the second chart, it is misaligned from the first one, even though they both have the same Width and Height in the debugger, they seem to have different sizes in the application.

What I want to achieve is to have all the elements have the same size in the application

@FXML
private VBox chartBox;
private StackPane chartPane;
protected LineChart<Number, Number> baseChart;
protected LineChart<Number, Number> bgChart;

private void constructChartsPane() {
    chartBox.getChildren().clear();
    chartPane = new StackPane();

    chartPane.getChildren().add(baseChart);
    chartPane.getChildren().add(bgCharrt);

    VBox.setVgrow(chartPane, Priority.ALWAYS);
    chartBox.getChildren().add(0, chartPane);
}

The image below represents the two charts. The one at the bottom with the grid and yAxis on the left is the baseChart and the other one above with the yAxis on the left is the bgChart. As you can see, the bgChart is bigger than the baseChart

enter image description here

Emanuel Giurgiu
  • 79
  • 7
  • [mcve] please .. that said: basically, you'll need a custom layout that keeps the plotarea above each other and leaves as much space for the right/left axis' as needed. Remember seeing something like this a while ago here on SO, time for a bit of searching (your's :) – kleopatra Mar 22 '20 at 17:08
  • have a look at https://stackoverflow.com/q/49139565/203657 for starters – kleopatra Mar 22 '20 at 17:22

0 Answers0