Legend Alignment using Scene Builder - javafx

Question

Recently, I used the scene builder to draw a bar chart; however, the legend is not aligned correctly. When I use
barchart.setLegendSide(Side.BOTTOM);
the legend shows vertically as in the picture below while I wanted it to be shown horizontally.
Despite that, if I don't use the scene builder, there is no problem with the chart. Please show me the way to fix this issue.
Main file
package LinkedIn;
import java.io.IOException;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
public class App extends Application{
#Override
public void start(Stage primaryStage) throws IOException{
Parent root = FXMLLoader.load(getClass().getResource("/LinkedIn/barchart.fxml"));
Scene scene = new Scene(root);
primaryStage.setScene(scene);
primaryStage.setTitle("LinkedIn");
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
FXML file
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.chart.BarChart?>
<?import javafx.scene.chart.CategoryAxis?>
<?import javafx.scene.chart.NumberAxis?>
<BarChart fx:id="barchart" animated="false" barGap="10.0" categoryGap="20.0" title="Car Sales by Brands" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="LinkedIn.Controller">
<xAxis>
<CategoryAxis side="BOTTOM" fx:id="xAxis" />
</xAxis>
<yAxis>
<NumberAxis fx:id="yAxis" side="LEFT" />
</yAxis>
<padding>
<Insets bottom="25.0" left="5.0" right="5.0" top="5.0" />
</padding>
</BarChart>
Controller File
package LinkedIn;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.geometry.Side;
import javafx.scene.chart.BarChart;
import javafx.scene.chart.CategoryAxis;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.layout.BorderPane;
public class Controller implements Initializable{
#FXML
private BarChart<String, Number> barchart;
#FXML
CategoryAxis xAxis;
#FXML
NumberAxis yAxis;
void loadData() {
xAxis.setLabel("Brand");
yAxis.setLabel("Value");
XYChart.Series<String, Number> series1 = new XYChart.Series<>();
series1.setName("Bob");
series1.getData().add(new XYChart.Data<String, Number>("Toyota", 200));
series1.getData().add(new XYChart.Data<String, Number>("Ford", 300));
series1.getData().add(new XYChart.Data<String, Number>("Jaguar", 50));
XYChart.Series<String, Number> series2 = new XYChart.Series<>();
series2.setName("Peter");
series2.getData().add(new XYChart.Data<String, Number>("Toyota", 500));
series2.getData().add(new XYChart.Data<String, Number>("Ford", 150));
series2.getData().add(new XYChart.Data<String, Number>("Jaguar", 100));
barchart.getData().add(series1);
barchart.getData().add(series2);
barchart.setLegendSide(Side.BOTTOM);
}
#Override
public void initialize(URL url, ResourceBundle rb) {
loadData();
}
}