在Angular中，要从API响应中填充数据到图表中，可以按照以下步骤进行：

1. 创建一个服务来处理API请求和响应。可以使用Angular内置的HttpClient模块来发送API请求和接收响应。假设我们有一个名为ChartDataServce的服务：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ChartDataService {
  private apiUrl = 'https://api.example.com/chartdata'; // 替换为实际的API URL

  constructor(private http: HttpClient) { }

  getChartData(): Observable {
    return this.http.get(this.apiUrl);
  }
}

2. 在组件中使用ChartDataService来获取数据并将其填充到图表中。假设我们有一个名为ChartComponent的组件：

import { Component, OnInit } from '@angular/core';
import { ChartDataService } from './chart-data.service';

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.css']
})
export class ChartComponent implements OnInit {
  chartData: any; // 用于存储从API响应中获取的数据

  constructor(private chartDataService: ChartDataService) { }

  ngOnInit() {
    this.chartDataService.getChartData().subscribe(data => {
      this.chartData = data; // 将API响应中的数据赋值给chartData变量
    });
  }
}

3. 在图表模板中使用chartData来渲染图表。假设我们使用了一个名为ngx-charts的图表库来渲染图表：

上述代码假设使用了ngx-charts库的垂直柱状图来展示数据。根据实际使用的图表库，可能需要适当调整模板代码。

通过上述步骤，我们可以从API响应中获取数据并将其填充到图表中。确保替换实际的API URL并根据所使用的图表库进行适当的调整。