How to load dynamic data in Multiple x-axis chart in ngx-admin

Question

I’m setting up an angular project using ngx-admin, and want to show some dynamic data in 'Multiple x-axis chart'. Data on labels, x-axis & y-axis are the following:- Labels should be ModuleI,Module II, Module III, X-axis with dates & Y-axis with values. These values should be updated on every ten seconds. I don't know how to do this in chart.component. Please help me.

This is chart.component.ts file

constructor(private theme: NbThemeService,
            private waterUsageService: WaterUsageService) 
{
    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
      const colors: any = config.variables;
      const chartjs: any = config.variables.chartjs;
       this.data = {
                  labels: this.waterDataArrayDate,
                  datasets: [{
                    label: this.waterDataArrayModule,
                    data: this.waterDataArrayValue,
                    backgroundColor: NbColorHelper.hexToRgbA(colors.danger, 0.3),
                    borderColor: colors.danger,
                    }],
                };
        this.options = {
                  /* Option data */
        }
     }
}

ngOnInit(){
    this.waterUsageService.getWaterUsageData() 
        .subscribe(data=>{
            data.forEach(item => {
              this.waterDataArrayDate.push(item.date);
              this.waterDataArrayValue.push(item.value);
              this.waterDataArrayModule.push(item.module);
            })
          });
  }