passing object from one component to another using service file in angular

Question

I am trying to draw a stacked bar chart using Kendo UI and angular. I want to pass data from home component to stacked bar chart component using service file. Home component console shows the dataset correctly but stacked bar chart component does not get the data as input.

Home component.ts

import { Component } from '@angular/core';
import { HomeService } from './home.service';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
})
export class HomeComponent {
  homeData: any = [];
  stackedbarchartdata: any = [];
  constructor(private Data: HomeService) {
    this.Data.getMethod().subscribe((res: any) => {
      this.homeData = res;
      this.stackedbarchartdata = this.homeData.stackedbarchartdata;
      console.log(this.stackedbarchartdata);
    })
  }
  ngOnInit() {}
}

home component.html

<kendo-tilelayout-item [col]="3" [colSpan]="2">
  <kendo-tilelayout-item-body>
    <app-stacked-bar-chart [stackedbarchartdata]="stackedbarchartdata"></app-stacked-bar-chart>
  </kendo-tilelayout-item-body>
</kendo-tilelayout-item>

stacked-bar-chart.component.ts

import { Input } from '@angular/core';
import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-stacked-bar-chart',
  templateUrl: './stacked-bar-chart.component.html',
  styleUrls: ['./stacked-bar-chart.component.css']
})
export class StackedBarChartComponent implements OnInit {
  @Input() stackedbarchartdata: any;
  ngOnInit() {
    console.log(this.stackedbarchartdata);
    }
}

Json Data

"singleBaChartData": {
    "name": "singleBaChartData-TOTAL REVENUE",
    "Title": "TOTAL REVENUE",
    "singleBaChartData": [{ "id": 1,"category": "product1","value": 5},
      { "id": 2,"category": "product2","value": 4}]}