title: JavaFX stackpane misaligned children
body: <p>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. </p>
  
  <p>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.</p>
  
  <p>What I want to achieve is to have all the elements have the same size in the application</p>
  
  <pre><code>@FXML
  private VBox chartBox;
  private StackPane chartPane;
  protected LineChart&lt;Number, Number&gt; baseChart;
  protected LineChart&lt;Number, Number&gt; 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);
  }
  </code></pre>
  
  <p>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</p>
  
  <p><a href="https://i.stack.imgur.com/t76ht.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/t76ht.png" alt="enter image description here"></a></p>