In my Angular 8 setup, I am working with the 'Date' data type and configuring multiple datasets of a 'Cartesian' type. I have been referring to documentation from here for guidance. Despite setting up the X Axis using callbacks in my code, I am struggling to figure out how to customize the hover label differently. The chart seems to break if I deviate from the time format requirement.
const dashInput = this.getDashboardInput();
const daysDifference = (+dashInput.endDate.getTime() - +dashInput.startDate.getTime()) / 1000 / 60 / 60 / 24;
if (daysDifference >= 150 ) {
this.enrollmentsAndCompletionsChartInUI.options.scales.xAxes[0].time.unit = 'month';
this.enrollmentsAndCompletionsChartInUI.options.scales.xAxes[0].time.displayFormats.month = 'MM/YY';
} else if (daysDifference >= 60) {
this.enrollmentsAndCompletionsChartInUI.options.scales.xAxes[0].time.unit = 'week';
this.enrollmentsAndCompletionsChartInUI.options.scales.xAxes[0].time.displayFormats.week = 'MM/DD/YY';
} else {
this.enrollmentsAndCompletionsChartInUI.options.scales.xAxes[0].time.unit = 'day';
this.enrollmentsAndCompletionsChartInUI.options.scales.xAxes[0].time.displayFormats.day = 'MM/DD/YY';
}
I am seeking assistance on how to set the hover box property as it's not explicitly mentioned in the documentation. Any insights would be greatly appreciated as I might have overlooked a simple detail while reading through the guidelines.
The current configuration settings for ChartJs scales are overridden by the component according to the adjustments above.
scales: {
xAxes: [{
id: 'time axis',
type: 'time',
time: {
unit: 'day',
displayFormats: {
day: 'MM/DD/YY'
}
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Enrollments'
},
ticks: {
beginAtZero: true,
min: 0
}
}]
}
https://i.sstatic.net/Xvpsl.png
To clarify, I aim to configure the hover-over behavior to mirror the formatting of the XAxis, such as '08/05/19.'