Can't get dynamic data to echart on angular (ngx-admin)

when i call the data anywhere outside the subscribe i get undefined . im working with chartjs and im facing the same problem too, could any one explaine to me what im doing wrong .

in the component for the bar chart this is what i tried.

@Component({
  selector: 'ngx-d3-bar',
  template: `
    <chart echarts [options]="options" class="echart"></chart>

  `,
})
export class D3BarComponent implements OnDestroy {
  Productlist : Product[];
  product :Product= new Product()
  options: any = {};
  themeSubscription: any;
  ax_Y : any[]=[] ;
  ax_X : any ;
  constructor(private theme: NbThemeService , private  prodservice : ProductService) {
  }

  ngAfterViewInit() {

    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
      this.prodservice.getAllproducts().subscribe((data) => {
        this.Productlist = data;
        console.log("all products",this.Productlist);
        this.ax_Y = this.Productlist.map(x=>x.price) ;
        this.ax_X = this.Productlist.map(x=>x.type) ;
        console.log("les x",this.ax_X)
        console.log("les y",this.ax_Y)

        //i get the values from ax_x and ax_y after maping everything is workingfine

      });

      const colors: any = config.variables;
      const echarts: any = config.variables.echarts;

      this.options = {
        backgroundColor: echarts.bg,
        color: [colors.primaryLight],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            //data:[['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']]
            data:this.ax_X, // but here the table is empty there is no dynamic data
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              lineStyle: {
                color: echarts.axisLineColor,
              },
            },
            axisLabel: {
              textStyle: {
                color: echarts.textColor,
              },
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: echarts.axisLineColor,
              },
            },
            splitLine: {
              lineStyle: {
                color: echarts.splitLineColor,
              },
            },
            axisLabel: {
              textStyle: {
                color: echarts.textColor,
              },
            },
          },
        ],
        series: [
          {
            name: 'Score',
            type: 'bar',
            barWidth: '60%',
            // data: [10, 52, 200, 334, 390, 330, 220]
            data: this.totalpric_Y, //my dynamic data
          },
          console.log('whyyyyyyyyyyyyy',this.ax_Y)
        ],
      };
    });
  }

  ngOnDestroy(): void {
    this.themeSubscription.unsubscribe();
  }
}

this is the data in the inspection everything is working fine untill i call the data anywhere outside the function

Solution

the solution :

@Component({
 selector: 'ngx-d3-bar',
 template: `
<chart echarts [options]="options" class="echart"></chart>

  `,
    })
   export class D3BarComponent implements OnDestroy {
   Productlist : Product[];
   product :Product= new Product()
   options: any = {};
   themeSubscription: any;
    ax_Y : any[]=[] ;
   ax_X : any ;
   constructor(private theme: NbThemeService , private  prodservice : 
   ProductService) {
   }

   ngAfterViewInit() {

  this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
  this.prodservice.getAllproducts().subscribe((data) => {
    this.Productlist = data;
    console.log("all products",this.Productlist);
    this.ax_Y = this.Productlist.map(x=>x.price) ;
    this.ax_X = this.Productlist.map(x=>x.type) ;
    console.log("les x",this.ax_X)
    console.log("les y",this.ax_Y)


  const colors: any = config.variables;
  const echarts: any = config.variables.echarts;

  this.options = {
    backgroundColor: echarts.bg,
    color: [colors.primaryLight],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        //data:[['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']]
        data:this.ax_X, // but here the table is empty there is no dynamic data
        axisTick: {
          alignWithLabel: true,
        },
        axisLine: {
          lineStyle: {
            color: echarts.axisLineColor,
          },
        },
        axisLabel: {
          textStyle: {
            color: echarts.textColor,
          },
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: echarts.axisLineColor,
          },
        },
        splitLine: {
          lineStyle: {
            color: echarts.splitLineColor,
          },
        },
        axisLabel: {
          textStyle: {
            color: echarts.textColor,
          },
        },
      },
    ],
    series: [
      {
        name: 'Score',
        type: 'bar',
        barWidth: '60%',
        // data: [10, 52, 200, 334, 390, 330, 220]
        data: this.totalpric_Y, //my dynamic data
      },
      console.log('whyyyyyyyyyyyyy',this.ax_Y)
    ],
  };
   });
       });
   }

 ngOnDestroy(): void {
 this.themeSubscription.unsubscribe();
      }
  }