Custom template for cursor axes labels in JavaScript

Answered

Hey, how would I go about adding a custom template for the cursor axis labels using the Javascript 2D chart API?

I’d like the x-axis to not just have a date in MM/DD/YYYY format but a date and time displayed. The current implementation is below, and below that is the desired implementation.

Current: https://ibb.co/qJgJ36j

Desired: https://ibb.co/XzTkDgw

I have looked through the documentation but I may have missed something. If I have, please point me in the right direction, thanks!

Version

2.2

JavaScript AxisLabelTemplate cursormodifier javascript

NICOS TOMBROS asked 2 years ago
last edited 2 years ago

You must login to post comments

Answers (1)

Best Answer

Hi Nicos

The cursors obey axis CursorLabelFormatting which can be accessed on axis.labelProvider.cursorLabelFormat property.

There’s no format out the box which includes date & time, but you can specify any format by overriding the labelprovider.

Have a look at Axis Label Formatting – Custom LabelProviders

Something like this will override x-axis cursor labels:

// Override X Axis label formatting to format as date strings
xAxis.labelProvider.formatCursorLabel = (dataValue) => {
    const unixDateStamp = dataValue;
    return new Date(unixDateStamp * 1000).toLocaleDateString("en-GB", {
        month: "numeric",
        year: "numeric",
        day: "numeric"
    });
};