Pass component variable to JS library in angular

I have a dashboard component with shows charts on the page. The charts library needs data in order to render the chart and display on dashboard. Currently the data is static and works fine, but i need the data to be given by typescript variable which will be initialized by API call.

Dashboard HTML:

        <div class="panel panel-white">
          <div class="panel-heading clearfix">
            <h4 class="panel-title">Series Chart</h4>
          </div>
          <div class="panel-body">
            <canvas id="series-chart"></canvas>
          </div>
        </div>

Dashboard Component:

export class DashboardComponent implements OnInit {

  totalSymbol = 0;
  chartLabels = ['A', 'B', 'C'];

  constructor(private http: HttpClient, private apiUrl: ApiUrlService) {
  }

  ngOnInit() {
    this.fetchTotalSymbol();
  }

  fetchTotalSymbol() {
    this.http.get(this.apiUrl.getBaseUrl() + 'symbol/count').subscribe(data => {
      this.totalSymbol = +data;
    });
  }

}

dashboard.js

$(document).ready(function () {

  "use strict";
  new Chart(document.getElementById("series-chart"),
    {
      "type": "doughnut",
      "data": {
        "labels": ["Red", "Blue", "Yellow"],
        "datasets": [{
          "label": "My First Dataset",
          "data": [300, 50, 100],
          "backgroundColor": ["rgb(236, 94, 105)", "rgb(0, 112, 224)", "rgb(241, 194, 5)"]
        }]
      }
    });

});

I need to replace Labels Red,Blue,Yellow in dashboard.js to A,B,C from dashboard component chartLabels after API call fetchTotalSymbol().

I am including dashboard.js in .angular-cli.json under scripts array.