I am making a project in angular (7) and when I put the highchart graphs (highcharts-chart module), it throws me the following error on the console:
ERROR TypeError: Cannot read property 'series' of undefined
The strange thing is that the graph is displayed well, but I think that I am either passing the variables wrong, or initialized badly or something like that, therefore, even if it is seen, I would like to leave it without console errors.
The code I have is the following.
TemplateHTML
<highcharts-chart [Highcharts]="Highcharts" [options]="graficoOptions"></highcharts-chart>
Controller
this._contratosService.getEstados(localStorage.getItem('idCliente')).subscribe(
async data => {
this.graficoOptions= this._funcionesService.decodificarToken(data);
for (let i = 0; i < this.arraySituaciones.length; i++) {
this.array = this.array.concat([
{
name: this.arraySituaciones[i],
y: this.arrayContadorContratos[i],
selected: false
}
]);
}
this.options = JSON.parse(this._GraficosService.graficosOption);
this.graficoOptions= {
lang: this.options,
chart: { type: 'line' },
exporting: {
buttons: {
contextButton: {
menuItems: [
'printChart',
'separator',
'downloadPNG',
'downloadJPEG',
'downloadPDF',
'downloadSVG',
'separator',
'downloadCSV',
'downloadXLS'
]
}
}
},
title: { text: 'Estados de los contratos' },
subtitle: {
text:
'Se muestran la cantidad de contratos que existen en cada estado.'
},
tooltip: {
pointFormat:
'<span style="color:{series.color}">Contratos: </span>: <b>{point.y}</b><br/>',
shared: true
},
series: [
{
type: 'pie',
allowPointSelect: true,
keys: ['name', 'y', 'selected', 'sliced'],
data: this.array,
showInLegend: true
}
],
plotOptions: {
series: {
cursor: 'pointer',
events: {
click: function(e) {
console.log('1234');
}
}
}
},
credits: { enabled: false }
};
});
The error occurs because you are declaring the graph at the beginning of the template, when entering the component the series are undefined because no value arrives, but then when you declare it in the method it rebuilds it again, that is why the graph is displayed
You must define the default value of
graficoOptions
would be as follows: