повторно использовать холст в другом компоненте с Angular 8

Question

У меня есть компонент с именем app-in-ccn , в котором я создал гистограмму, используя chart js. Я хочу повторно использовать тот же холст id = ccn1canvas в другом компоненте app-in-air без использования селектора app-in-ccn canvas id = ccn1canvas / canvas / app-in-ccn . Как и в app-in-air , я могу повторно использовать тот же холст, потому что, если я использую селектор, тогда применяется таблица стилей родительского компонента, но я хочу использовать таблицу стилей второго компонента.

Мой компонент выглядит так:

import { Component, OnInit } from '@angular/core';
import { Chart} from 'chart.js';
import { HttpService } from 'app/http.service';

@Component({
  selector: 'app-in-ccn',
  template: '<div class="main-container"> <canvas id="ccn1canvas"></canvas> </div>',
  styleUrls: ['./in-ccn.component.scss']
})
export class InCCNComponent implements OnInit {
  ttype = 'bar';
  legend_display = false;
  legend_align = 'centre';
  legend_color = 'white';
  datas_legend_name = 'Success';
  dataf_legend_name = "Failure";
  data_chart_color1 = 'white';
  data_chart_color2 = 'black';
  serverdata: any;
  labels1 = [];
  datas = [];
  dataf = [];
  barchart = [];
  backgr = 'white';



  constructor(private _http: HttpService) { }

    ngOnInit(): void {
  
    this._http.getvEMM('http://172.21.2.211:8099/v1/kpiDashboard/ccn/getLatestRecord').subscribe(data =>{ 
      this.serverdata = data;
      var slab1 = this.serverdata;
      var nl = slab1.nodeList;
      var c= slab1.nodeList.length;
      
      for (let i=0; i<c; i++){
        this.labels1.push(nl[i].nodeName);
        this.datas.push(nl[i].throughputRate.successRate);
        this.dataf.push(nl[i].throughputRate.failureRate);
      }


    });

    setTimeout(() => {

    this.barchart= new Chart('ccn1canvas',{
      type: this.ttype,
      options: {
        legend: {
            display: this.legend_display,
            align: this.legend_align,
            labels: {
                fontColor: this.legend_color
            }
        }
    },
      data:{
        labels:this.labels1,

        datasets:[
          {
            label: this.datas_legend_name,
            data: this.datas,
            backgroundColor:this.backgr,
            borderColor: this.data_chart_color1,
            fill: false,
          },
          {
            label: this.dataf_legend_name,
            data: this.dataf,
            backgroundColor:this.data_chart_color2,
            borderColor: this.legend_color,
            fill: false,
          }
        ]
      }
    });
  },1000);

  }
}