I have two data sets that I want to format into two column charts.
(2) [{…}, {…}]
0:
historyDate: "2021-02-10T10:00:000Z"
documentStatusHistory:
CANCELLED: 6
COMPLETED: 52
IN_PROGRESS: 1
OPEN: 1
PHASE_OUT: 1
1:
historyDate: "2021-02-17T10:00:000Z"
documentStatusHistory:
CANCELLED: 6
COMPLETED: 52
IN_PROGRESS: 1
OPEN: 1
PHASE_OUT: 1
The chart is configured in ngAfterContentInit
ngAfterContentInit() {
const chartOptions: Options = this.createDefaultColumnOptions();
chartOptions.title.text = this.chartTitle;
this.resultChart = Highcharts.chart(this.resultChartTarget.nativeElement, chartOptions);
this.resultChart.addSeries(this.buildColumnSeries(this.uuidService.getNewUuid(), this.chartData));
}
The column data are created here
private buildColumnSeries(id: string, chartData: any[]) {
const options: SeriesOptions = {
id,
type: 'column',
data: [],
} as SeriesOptions;
chartData.forEach((item) => {
const date = new Date(item.historyDate);
const newDate = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate());
for (const status in item.documentStatusHistory) {
this.resultChart.addSeries({
type: 'column',
yAxis: 0,
name: status.replace('_', ' '),
data: [[newDate, item.documentStatusHistory[status]]],
color: DisplayUtil.getStatusColor(status)
});
}
});
return options;
}
and here the chart options
private createDefaultColumnOptions(): Options {
return {
chart: {
zoomType: 'xy',
marginLeft: 70,
marginRight: 70
},
title: {
useHTML: true
},
legend: {
verticalAlign: 'top',
labelFormat: '<b>{name}</b>',
enabled: true
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
week: '%e. %b'
},
title: {
text: 'Date'
}
},
yAxis: [
{ // Primary yAxis
title: {
text: 'Total ' + this.chartTitle
}
}
],
tooltip: {
shared: true
},
plotOptions: {
column: {
stacking: 'normal'
},
series: {
cursor: 'pointer'
}
},
credits: {
enabled: false
}
} as Options;
}
}
At the end I get the following chart
I am now not entirely clear why I am getting the legend twice. the columns are each correctly structured. Does anyone have any indication of what's wrong here?