My bar chart is behaving strangely - when I click on all labels, it only shows two days instead of updating as expected. I suspect it may be due to a bad implementation involving parsing. Can anyone provide assistance?
I have created a minimum example on Stackblitz: https://stackblitz.com/edit/angular-13-lsvqov?file=src%2Fapp%2Fapp.component.ts
this.chart = new Chart('eventsChart', {
type: 'bar',
data: {
datasets: this.generateChartData(mergedKeys)
},
options: {
plugins: {
tooltip: {
callbacks: {
title: context => {
const d = new Date(context[0].parsed.x);
return d.toLocaleString([], {
day: '2-digit',
month: 'short',
year: 'numeric'
});
}
}
}
},
scales: {
x: {
type: 'time',
time: {
unit: 'day'
}
},
y: {
ticks: {
stepSize: 1
}
}
},
aspectRatio: 2,
maintainAspectRatio: false,
responsive: true
}
});
private generateChartData(keys: string[]) {
return keys.map((key: string) => {
return {
label: key,
data: this.dataSource,
parsing: {
xAxisKey: 'periodStartTime',
yAxisKey: `keyStats.${key}`
},
backgroundColor: labelColor[key]
};
});
}