SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components

Answered
1
0

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
  • You must to post comments
Best Answer
1
1

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.