How to display date-time values in tooltip for Angular Range Column Chart?
Description
This article explains how to display date-time values in tooltips for an Angular Range Column Chart, specifically when the Y-axis represents time-based data(e.g., start and end times).
Solution
The chart component does not natively support displaying date-time values directly on the Y-axis. However, you can represent date-time values by providing the data in milliseconds (as double-type values) in the dataSource. These numeric values can then be converted to a readable date-time format in the tooltip using the tooltipRender event.
Implementation
The following code snippet demonstrates how to convert timestamp values on the Y-axis into formatted date-time strings within the tooltip.
app.component.ts
public tooltipRender(args: ITooltipRenderEventArgs): void {
const intl: Internationalization = new Internationalization();
const dateFormat: (date: Date) => string = intl.getDateFormat({ format: 'hh:mm a' }) as (date: Date) => string;
const high: string = dateFormat(
new Date(args.series.dataSource[args.point.index].y)
);
const low: string = dateFormat(
new Date(args.series.dataSource[args.point.index].y1));
args.text = `${args.point.x}: ${high} - ${low}`;
}
app.component.html
<ejs-chart (tooltipRender)="tooltipRender($event)">
</ejs-chart>
Output
The tooltip will now display time values in a readable format such as 01:30 PM – 02:50 PM, even though the Y-axis values are provided as Date objects, which are internally handled as milliseconds.
