I have kendo scatter chart with 2 y-axis . I'm using kendo angular charts . When i try to bind my data i cannot see values and x-axis shows weird numbers instead of datetime values.

Here is my hourly data

[{"dateRange":"2022-02-10 00:00","totalWet":0,"totalDry":0},{"dateRange":"2022-02-10 01:00","totalWet":0,"totalDry":0},{"dateRange":"2022-02-10 02:00","totalWet":0,"totalDry":0},{"dateRange":"2022-02-10 03:00","totalWet":0,"totalDry":0},{"dateRange":"2022-02-10 04:00","totalWet":0,"totalDry":0},{"dateRange":"2022-02-10 05:00","totalWet":0,"totalDry":0},{"dateRange":"2022-02-10 06:00","totalWet":0,"totalDry":0},{"dateRange":"2022-02-10 07:00","totalWet":0,"totalDry":0},{"dateRange":"2022-02-10 08:00","totalWet":0,"totalDry":0},{"dateRange":"2022-02-10 09:00","totalWet":0,"totalDry":0},{"dateRange":"2022-02-10 10:00","totalWet":0,"totalDry":0},{"dateRange":"2022-02-10 11:00","totalWet":9.8572,"totalDry":0},{"dateRange":"2022-02-10 12:00","totalWet":0,"totalDry":0},{"dateRange":"2022-02-10 13:00","totalWet":0,"totalDry":0},{"dateRange":"2022-02-10 14:00","totalWet":0,"totalDry":0},{"dateRange":"2022-02-10 15:00","totalWet":0,"totalDry":0},{"dateRange":"2022-02-10 16:00","totalWet":0,"totalDry":0},{"dateRange":"2022-02-10 17:00","totalWet":147.479,"totalDry":16.6665},{"dateRange":"2022-02-10 18:00","totalWet":0,"totalDry":0},{"dateRange":"2022-02-10 19:00","totalWet":0,"totalDry":0}]

Here my html

<kendo-chart>
<kendo-chart-legend position="bottom" orientation="horizontal"></kendo-chart-legend>
<kendo-chart-tooltip format='{0:dd-MM-yyyy} : {1}'>
</kendo-chart-tooltip>

<kendo-chart-y-axis>
  <kendo-chart-y-axis-item [title]="{ text: 'Wet' }" >
  </kendo-chart-y-axis-item>
  <kendo-chart-y-axis-item name="totalDry" [title]="{ text: 'Dry' }" >
  </kendo-chart-y-axis-item>
</kendo-chart-y-axis>

<kendo-chart-x-axis>
  <kendo-chart-x-axis-item
    [categories]="categories"
    [axisCrossingValue]="crossingValues"
    [baseUnit]="baseUnit"
    [title]="{ text: 'Date' }"
    [labels]="{ format: 'dd-MM-yyyy HH:mm', rotation: 'auto' }"
  >
  </kendo-chart-x-axis-item>
</kendo-chart-x-axis>

<kendo-chart-series>
  <kendo-chart-series-item
    *ngFor="let item of series"
    [type]="type"
    [name]="item.name"
    [data]="item.data"
    [xField]="item.xField"
    [yField]="item.yField"
    [yAxis]="item.yAxis"
  >
  </kendo-chart-series-item>
</kendo-chart-series>

here my ts file

 public type = "scatterLine" as SeriesType;
 public style = "smooth";
 public series = []
 private eodRequestBody: EndOfDayChartRequest;
 public lineSeriesData: any[] 
 public categories = "dateRange";
 public baseUnit = "hours";
 public crossingValues: Date[] = [new Date("2022-02-10 00:00:00"), new Date("2022-02-10 23:59:59")];

 constructor(private eodSharedService: EodSharedService,private eodService:EODService) { }


  ngOnInit(): void {
     this.loadData(); 
  }

  loadData() {
      this.eodService.getEndOfDayDistrubutionsOfFuelAndDry(eodRequestBody).subscribe(
      (res) => {
         this.lineSeriesData = res.result.items
          
    this.series = [{
      name: "Wet",
      data: this.lineSeriesData,
      xField: "dateRange",
      yField: "totalWet"
    },
    {
      name: "Dry",
      data: this.lineSeriesData,
      xField: "dateRange",
      yField: "totalDry",
      yAxis: "totalDry"
    },
    ];
  }
)
}

shows like this . I cannot see value and x-axis is weird. What can be the problem?

What i'm doing wrong?