Проблема, с которой вы сталкиваетесь, заключается в том, что вызов метода update в функции render создает бесконечность l oop.
Render вызывает update - > обновление redr aws chart -> рендеринг вызывает снова -> рендеринг вызывает обновление -> ...
Один из способов избежать этого - использовать некоторые логические 'flags' контролировать это обновление будет вызываться один раз.
Простая демонстрация с console.log для проверки потока: https://jsfiddle.net/BlackLabel/acoxmhdw/
let chartForUpdate = true;
Highcharts.chart('container', {
chart: {
events: {
render() {
let chart = this;
console.log('test redraw call 1')
if (chartForUpdate) {
chartForUpdate = false;
chart.series[0].update({
data: [5, 10]
})
console.log('test condition IF call')
}
console.log('test redraw call 2')
chartForUpdate = true
}
}
},
series: [{
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}]
});
РЕДАКТИРОВАТЬ
Я сделал ошибку, извиняюсь - максимальный стек вызовов не был получен из-за бесконечности l oop от вызовов рендеринга, но из данных, которые вы пытались вставить.
Обновленные данные должны быть в формате, который требуется Highcharts - , то есть объект конфигурации серии с данными в виде массива объектов или массива значений или массива массивов - документация: https://www.highcharts.com/docs/chart-concepts/series и https://api.highcharts.com/class-reference/Highcharts.Series#update
Между тем, в вашей демонстрации массив объектов данных передается в функцию обновления, которая создает ошибку.
Я не уверен, какие значения вы бы хотели после нажатия этой кнопки, но вам нужно будет создать для нее новый объект серии. Примерно так:
https://stackblitz.com/edit/angular-9nkrgd-aykarp?file=src / app / app.component.ts