Problem with DateTimeContinuousAxis, one day is added to each date without no apparent reason [Nativescript-Angular]

Question

I receive a json like this from chartService, But when I try to show the data, 1 day is added to each date. I am using Genymotion for emulate. I don't know if it could be an internal emulator time zone problem, will anyone know what is happening?

JSON = [{
"fecha": "2019-09-23",
"km_rec": 431.56
}, {
"fecha": "2019-09-25",
"km_rec": 187.12
}, {
"fecha": "2019-09-26",
"km_rec": 270.08
}, {
"fecha": "2019-09-27",
"km_rec": 121.04
}, {
"fecha": "2019-09-28",
"km_rec": 407.96
}, {
"fecha": "2019-09-29",
"km_rec": 10.98
}]

<StackLayout class="c-stacklayout" alignItems="flex-end">
    <GridLayout class="modal_chart">
        <RadCartesianChart tkExampleTitle tkToggleNavButton>            
            <DateTimeCategoricalAxis tkCartesianHorizontalAxis dateFormat="dd-MMM" labelFitMode="Rotate" labelRotationAngle="-1.2" labelTextColor="black"></DateTimeCategoricalAxis>
            <LinearAxis tkCartesianVerticalAxis allowPan="false" allowZoom="false"></LinearAxis>
            <LineSeries tkCartesianSeries selectionMode="DataPointMultiple" showLabels="true" [items]="distance" valueProperty="km_rec" categoryProperty="fecha">
                <PointLabelStyle tkLineLabelStyle fontStyle="Bold" fillColor="#FC6060" textSize="12" textColor="White">
                </PointLabelStyle>
            </LineSeries>
            <RadCartesianChartGrid tkCartesianGrid horizontalLinesVisible="true" verticalLinesVisible="false" verticalStripLinesVisible="false" horizontalStripLinesVisible="true" >
            </RadCartesianChartGrid>
        </RadCartesianChart>
    </GridLayout>
</StackLayout>

ngOnInit() {
   this.initDataItems()
}

  private initDataItems() {
   this.checkedDistanceData();
}

checkedDistanceData() {
    this.query(Config.storage.vehicleSelected, veh => {
        this.query(moment().format('YYYY-MM-DD') + this.id_veh, data => {
          if (data) {
            this.setChartDistance(JSON.parse(data.value));
                ...
                } else {
                   this.chartService();
                   ...
                }
            });
        };
    });

  chartService() {
    this.httpGet(route (www.dis....),
      data => {
        this.setChartDistance(data);
        this.changeDetector.detectChanges();
    },
      error => {
          error...
    }, null);
}
  get getchartDistance() {
      return distance;
}

  setChartDistance(chart) {
    this.distance = chart;
}

Answer 1

According to the documentation, you should store your dates in milliseconds.

Most likely you're passing a date object that is getting serialized and on deserialization it's losing/gaining some hours and flipping to the next day.

You might want to run some tests if using UTC or the local timezone is better for this (since you're using moment you can use moment.utc() and then get it in ms).

See the example here: https://github.com/NativeScript/nativescript-ui-samples/blob/master/chart/app/examples/data-models/date-time-model.ts