Использование данных, полученных из Backend в Angular Highchart

Question

Вот как я отображал данные в старшей диаграмме с накоплением столбцов в угловом 5.

series: [{
    name: 'DEF',
    data: [5, 3, 4, 7, 2]
}, {
    name: 'ABC',
    data: [2, 2, 3, 2, 1]
}, {
    name: 'MNP',
    data: [3, 4, 4, 2, 5]
}, {
    name: 'ASM',
    data: [3, 5, 2, 3, 6]
}, {
    name: 'BCC',
    data: [2, 5, 3, 4, 6]
}]

Теперь я пытался, чтобы при инициализации этого компонента я получал данные из бэкэнда и использовал их здесь. Я успешно получаю данные, как показано ниже, но не знаю, как их использовать для отображения на высоких графиках.

  ngOnInit() {
    this.metricService.getPluginMetrics().subscribe(data =>{     
      this.metricItems = data;
      console.log(this.metricItems[0].value);
    })
  };

Данные извлекаются из файла json в бэкэнде, чтобы на данный момент смоделировать API, а затем преобразуются в строку, и таким образом данные возвращаются.

Это часть содержимого файла JSON.

[
    {
        "name": "DEF",
        "value": [10, 20, 40, 60, 60],
        "type": "",
        "timestamp": 1533822125000
    },
    {
        "name": "ABC",
        "value": [5, 3, 4, 7, 2, 6],
        "type": "",
        "timestamp": 1533822125000
    }
]

На угловом фронте объект для MetricItem равен

export interface MetricItem {
    name: string;
    value: string;
    type: string;
    timestamp: string;
}

Также я пытался заменить

series: [{
        name: 'DEF',
        data: [5, 3, 4, 7, 2]
    },.......

с

series: [{
        name: this.metricItems[0].name,
        data: this.metricItems[0].value
    }

Но это не имеет никакого эффекта, и диаграмма не отображается. Подскажите, пожалуйста, как к этому подойти.

РЕДАКТИРОВАТЬ: Как @ Core972 предложил в комментариях, я заменил

title: {
    text: 'Stacked Consumption chart'
}

с этим

title: {
    text: this.metricItems[0].name
}

но диаграмма не отображается.