Why kendo chart is rendering two times?

[Adil]

Hi

I have kendo chart with dynamic data and data load based on date selection when i set daily data i'm showing daily data when i set range weekly showing weekly ... like this. I'm using baseUnit function for this of course... but looks like chart is rendering 2 times.

Here is my example

<kendo-chart
  [categoryAxis]="{ categories: categories, baseUnit:baseUnit, labels: { rotation: 'auto', format: format } }"
>
  <kendo-chart-legend
    position="bottom"
    orientation="horizontal"
  ></kendo-chart-legend>
  <kendo-chart-tooltip format="{0:c}"></kendo-chart-tooltip>
  <kendo-chart-series>
    <kendo-chart-series-item
      *ngFor="let item of series"
      [type]="type"
      [line]="{ style: style }"
      [data]="item.data"
      [name]="item.name"
    >
    </kendo-chart-series-item>
  </kendo-chart-series>
</kendo-chart>

here is ts code

 public startDate: Date
  public endDate: Date
  public dateDifference = 0;
  private eodRequestBody: EndOfDayChartRequest;
  public type = "area" as SeriesType;
  public style = "smooth";
  public areaSeries = []
  public areaSeriesData: any[]
  public categories = "dateRange";
  public groupField = "fuel";
  public areaSeriesField = "totalAmount";
  public noData = false;
  public _subscription : Subscription
  public format= ""
  public baseUnit = ""


  constructor(private eodSharedService: EodSharedService,private eodService:EODService,private cdr:ChangeDetectorRef) { }
  ngOnDestroy(): void {
    this._subscription.unsubscribe();
  }

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

dateDiff(startDate: Date, endDate: Date): number { //date diffirence calc
  var Time = endDate.getTime() - startDate.getTime();
  var Diff = Time / (1000 * 3600 * 24);
  return Diff;
}

loadData() {
  this._subscription = this.eodSharedService.GetUpdatedDates().subscribe(data => { //subscribing start/end date values from shared service
    this.startDate = data.startDate;
    this.endDate = data.endDate;


    this.dateDifference = this.dateDiff(this.startDate, this.endDate);
    let range = "";
    //console.log("dateDiff : "+ this.dateDifference)
    if (this.dateDifference == 0 || this.dateDifference <= 1) {range = "hourly"; this.format = "HH:mm"; this.baseUnit = "hours"}
    else if (this.dateDifference <= 14) {range = "daily";  this.format = "dd/MM"; this.baseUnit = "days"}
    else if (this.dateDifference <= 30) {range = "weekly"; this.format = "dd/MM"; this.baseUnit = "weeks"} 
    else if (this.dateDifference > 30 && this.dateDifference < 365) {range = "monthly";  this.format = "dd-MM-yyyy"; this.baseUnit = "months"}
    else if (this.dateDifference >= 365) {range = "yearly";  this.format = "yyyy"; this.baseUnit = "years"}

    this.eodRequestBody = {
      startDate: getISOStringFromDate(this.startDate),
      endDate: getISOStringFromDate(this.endDate),
      client: null,
      type:range
    };

    this.getFuelAmountsChart(this.eodRequestBody)

  });
}
  getFuelAmountsChart(eodRequestBody: EndOfDayChartRequest) {
    console.log(eodRequestBody);
    this.eodService.getEndOfDayDistrubutionOfFuel(eodRequestBody).pipe(take(1)).subscribe(
      (res) => {
        this.areaSeriesData = [];
        res.result.items.forEach(item=>{
          if(eodRequestBody.type != "weekly"){ 
            if(item.totalAmount > 0){
              item.dateRange = new Date(item.dateRange);
              this.areaSeriesData.push(item);
            }
          }
          else{
            item.dateRange = item.dateRange;
            this.areaSeriesData.push(item);
          }
        })
        console.log(JSON.stringify(this.areaSeries));
        this.areaSeries = groupBy(this.areaSeriesData, [{ field: this.groupField }]) as GroupResult[];
        this.noData = false;
        var count = res.result.items.length;
        if(count == 0){this.noData = true;}
        this.cdr.markForCheck()

      },
      (err) => {
        console.log('ERROR ON FETCHING EOD getEndOfDayDistrubutionOfFuel', JSON.stringify(err));
      }
    )
    
  }

Can you help me on this??

Thanks