Please see below screenshot:
As soon as I change anything on the chart (e.g. enable / disable legend, change range), it formats it properly.
How can I fix it?
HTML Code:
Code: Select all
<highcharts-chart [Highcharts]="Highcharts" [(update)]="updateFlag" style="width: 100%; height: 100%; display: block;"
[constructorType]="'stockChart'" [options]="chartOptions">
</highcharts-chart>
Type Script:
Code: Select all
export class Component implements OnInit {
@Input() set funds(value: Fund[]) {
for (let index = 0; index < value.length; index++) {
this.loadChart(index, value[index]);
}
this.updateFlag = true;
}
updateFlag = false;
Highcharts: typeof Highcharts = Highcharts;
chartOptions: any = {
credits: {
enabled: false
},
chart: {
type: 'line',
zoomType: 'x'
},
title: {
text: null,
},
subtitle: {
text: null,
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: ''
},
labels: {
formatter: function () {
return (this.value * 100).toFixed(2);
}
}
},
legend: {
enabled: true
},
tooltip: {
headerFormat: '{point.x:%d/%m/%Y}',
pointFormatter: function () {
return '<b>' + this.series.name + '</b>: ' + Highcharts.numberFormat(this.y * 100, 2);
}
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
series: [{},{}, {}]
};
constructor() { }
ngOnInit(): void {
}
loadChart(index: number, fund: Fund) {
let data = fund.data.map((fp) => {
return [new Date(fp.date).valueOf(), fp.value]
});
let series = {
type: 'line',
name: fund.name,
data: data,
visible: true
};
this.chartOptions.series[index] = series;
}
}