Pre loader

Custom template for cursor axes labels in JavaScript


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.



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

  • You must to post comments
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"
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies