How can I set the gaps between the nodes in JavaFX XYChart

Question

I am trying to use a XYChart in JavaFX to display dates on X axis.

@FXML
private LineChart<Number, Number> grafico;
@FXML
private NumberAxis eixoy;
@FXML
private NumberAxis eixox;

I need to display different N series and sort them by date on the X axis. I did a lot of research and decided to use a NumberAxis , converting the date to int .

However the display is not pleasant:

What kinds of attributes and methods can I use to make my chart more readable?

Here my FXML code:

<?xml version="1.0" encoding="UTF-8"?>

<?import com.jfoenix.controls.JFXButton?>
<?import de.jensd.fx.glyphs.fontawesome.FontAwesomeIconView?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.chart.CategoryAxis?>
<?import javafx.scene.chart.LineChart?>
<?import javafx.scene.chart.NumberAxis?>
<?import javafx.scene.chart.ValueAxis?>
<?import javafx.scene.control.ComboBox?>
<?import javafx.scene.control.DatePicker?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TableColumn?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>

<VBox maxHeight="10000.0" maxWidth="10000.0" prefHeight="960.0" prefWidth="1600.0" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="Controller.GraficosController">
   <children>
      <GridPane maxHeight="50.0" minHeight="50.0" prefWidth="1600.0" style="-fx-background-color: #0a80a7;">
         <columnConstraints>
            <ColumnConstraints hgrow="SOMETIMES" />
         </columnConstraints>
         <rowConstraints>
            <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
         </rowConstraints>
         <children>
            <Label text="Indicadores" textFill="WHITE">
               <graphic>
                  <FontAwesomeIconView fill="WHITE" glyphName="LINE_CHART" size="40" wrappingWidth="55.0" />
               </graphic>
               <font>
                  <Font size="40.0" />
               </font>
               <GridPane.margin>
                  <Insets left="15.0" />
               </GridPane.margin>
            </Label>
         </children>
      </GridPane>
      <GridPane maxHeight="112.0" minHeight="112.0" prefHeight="20.0" VBox.vgrow="SOMETIMES">
        <columnConstraints>
            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
        </columnConstraints>
        <rowConstraints>
          <RowConstraints />
            <RowConstraints maxHeight="26.0" minHeight="26.0" prefHeight="26.0" vgrow="SOMETIMES" />
            <RowConstraints maxHeight="30.0" minHeight="30.0" prefHeight="30.0" vgrow="SOMETIMES" />
            <RowConstraints maxHeight="26.0" minHeight="26.0" prefHeight="26.0" vgrow="SOMETIMES" />
            <RowConstraints maxHeight="30.0" minHeight="30.0" prefHeight="30.0" vgrow="SOMETIMES" />
        </rowConstraints>
         <VBox.margin>
            <Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
         </VBox.margin>
         <children>
            <Label minHeight="26.0" prefHeight="26.0" text="Ano" GridPane.rowIndex="1">
               <font>
                  <Font name="System Bold" size="20.0" />
               </font>
            </Label>
            <ComboBox fx:id="cbxAno" minHeight="25.0" onAction="#anoMudou" prefHeight="25.0" prefWidth="200.0" promptText="Selecionar..." GridPane.rowIndex="2" />
            <Label minHeight="26.0" prefHeight="26.0" text="Turma" GridPane.columnIndex="1" GridPane.rowIndex="1">
               <font>
                  <Font name="System Bold" size="20.0" />
               </font>
            </Label>
            <ComboBox fx:id="cbxTurma" minHeight="25.0" onAction="#turmaMudou" prefHeight="25.0" prefWidth="200.0" promptText="Selecionar..." GridPane.columnIndex="1" GridPane.rowIndex="2" />
            <Label fx:id="lblAluno" minHeight="26.0" prefHeight="26.0" text="Aluno" GridPane.rowIndex="3">
               <font>
                  <Font name="System Bold" size="20.0" />
               </font>
            </Label>
            <ComboBox fx:id="cbxAluno" minHeight="25.0" onAction="#alunoMudou" prefHeight="25.0" prefWidth="200.0" promptText="Selecionar..." GridPane.rowIndex="4" />
            <Label minHeight="26.0" prefHeight="26.0" text="Data Início" GridPane.columnIndex="2" GridPane.rowIndex="1">
               <font>
                  <Font name="System Bold" size="20.0" />
               </font>
            </Label>
            <DatePicker fx:id="dataInicio" minHeight="25.0" onAction="#acaoDataInicio" GridPane.columnIndex="2" GridPane.rowIndex="2" />
            <Label minHeight="26.0" prefHeight="26.0" text="Data Fim" GridPane.columnIndex="2" GridPane.rowIndex="3">
               <font>
                  <Font name="System Bold" size="20.0" />
               </font>
            </Label>
            <DatePicker fx:id="dataFim" minHeight="25.0" onAction="#acaoDataFim" GridPane.columnIndex="2" GridPane.rowIndex="4" />
            <Label fx:id="lblCriterio" minHeight="26.0" prefHeight="26.0" text="Critério" GridPane.columnIndex="1" GridPane.rowIndex="3">
               <font>
                  <Font name="System Bold" size="20.0" />
               </font>
            </Label>
            <ComboBox fx:id="cbxCriterio" minHeight="25.0" onAction="#criterioMudou" prefHeight="25.0" prefWidth="200.0" promptText="Selecionar..." GridPane.columnIndex="1" GridPane.rowIndex="4" />
         </children>
      </GridPane>
      <GridPane fx:id="paneGrid" hgap="1.0" prefHeight="500.0" vgap="1.0" VBox.vgrow="ALWAYS">
        <columnConstraints>
          <ColumnConstraints hgrow="SOMETIMES" maxWidth="1000.0" minWidth="250.0" percentWidth="80.0" prefWidth="1000.0" />
          <ColumnConstraints hgrow="SOMETIMES" maxWidth="792.0" minWidth="10.0" prefWidth="462.0" />
        </columnConstraints>
        <rowConstraints>
          <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        </rowConstraints>
         <children>
            <LineChart fx:id="grafico" animated="true" GridPane.hgrow="ALWAYS" GridPane.vgrow="ALWAYS">
              <xAxis>
                <NumberAxis fx:id="eixox" animated="false" side="BOTTOM" />
              </xAxis>
              <yAxis>
                <NumberAxis fx:id="eixoy" side="LEFT" upperBound="10.0" />
              </yAxis>
            </LineChart>
            <VBox alignment="TOP_CENTER" prefHeight="200.0" prefWidth="100.0" GridPane.columnIndex="1">
               <children>
                  <TableView fx:id="tableDisciplinas" onMouseClicked="#onMouseClicked" onMouseEntered="#onMousePressed" onMouseExited="#onMouseReleased" VBox.vgrow="ALWAYS">
                    <columns>
                      <TableColumn fx:id="col_disciplinas" prefWidth="75.0" style="-fx-alignment: CENTER;" text="Disciplinas" />
                    </columns>
                     <columnResizePolicy>
                        <TableView fx:constant="CONSTRAINED_RESIZE_POLICY" />
                     </columnResizePolicy>
                     <VBox.margin>
                        <Insets bottom="20.0" />
                     </VBox.margin>
                  </TableView>
                  <JFXButton fx:id="btnGerarGraficos" onAction="#gerarGraficos" style="-fx-background-color: #0d536b;" text="Gerar Gráfico" textFill="WHITE">
                     <font>
                        <Font name="System Bold" size="21.0" />
                     </font>
                     <graphic>
                        <FontAwesomeIconView fill="WHITE" glyphName="LINE_CHART" />
                     </graphic>
                     <VBox.margin>
                        <Insets bottom="5.0" top="5.0" />
                     </VBox.margin>
                  </JFXButton>
               </children>
            </VBox>
         </children>
         <VBox.margin>
            <Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
         </VBox.margin>
      </GridPane>
   </children>
</VBox>

Answer 1

The function you are searching is NumberAxis.setTickLabelFormatter()

axis.setTickLabelFormatter(new StringConverter<Number>() {
        private SimpleDateFormat format = new SimpleDateFormat("dd.MM HH:mm");

        @Override
        public String toString(Number object) {
            return format.format(new Date((long) object));
        }

        @Override
        public Number fromString(String string) {
            // TODO
            return null;
        }
    });